【第7篇】TypeScript泛型的案例代码具体解释
8.1最简单泛型样例
Ts代码
/** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg: number): number { return arg; } /** * 或者:我们能够描写叙述使用“随意”类型的标识功能: */ function identity2(arg: any): any { return arg; } |
Js文件
/** * 没有泛型。我们要么必须给身份功能的特定类型 */ function identity1(arg) { return arg; } /** * 或者:我们能够描写叙述使用“随意”类型的标识功能: */ function identity2(arg) { return arg; } |
8.2泛型类型与接口
Ts代码一
/** * Working with Generic Type Variables * 与泛型类型变量 */ function _identity1<T>(arg: T): T { return arg; } /** * 假设还想记录的说法“arg”与每一个调用控制台的长度。我们或许会这样写 */ function loggingIdentity1<T>(arg: T): T { // console.log(arg.length); // Error: T doesn't have .length return arg; } /** *当我们这样做时。编译器会给出我们,我们使用的是“ARG”的“.length”成员的错误,但远不具备,我们说,“ARG”有这种成员。 请记住。我们在前面说。这些类型变量站在不论什么和全部类型的,所以有人使用此功能能够通过在一个'数'。而不是,它没有一个“.length”成员。 *例如说,我们实际上已经预期该功能直接对T的阵列,而那件T的工作。因为我们正在使用的阵列,对象.length成员应该可用。 我们能够这样描写叙述这就像我们将创建其它类型的数组: */ function loggingIdentity2<T>(arg: T[]): T[] { console.log(arg.length); return arg; } /** *我们还能够写成这种模式 ,一个数组.length,这样避免很多其它的错误 */ function loggingIdentity3<T>(arg: Array<T>): Array<T> { console.log(arg.length); return arg; } |
Ts编译js代码一
/** * Working with Generic Type Variables * 与泛型类型变量 */ function _identity1(arg) { return arg; } /** * 假设还想记录的说法“arg”与每一个调用控制台的长度。 我们或许会这样写 */ function loggingIdentity1(arg) { // console.log(arg.length); // Error: T doesn't have .length return arg; } /** *当我们这样做时,编译器会给出我们,我们使用的是“ARG”的“.length”成员的错误,但远不具备,我们说,“ARG”有这种成员。 请记住,我们在前面说,这些类型变量站在不论什么和全部类型的,所以有人使用此功能能够通过在一个'数',而不是,它没有一个“.length”成员。 *例如说,我们实际上已经预期该功能直接对T的阵列,而那件T的工作。因为我们正在使用的阵列,对象.length成员应该可用。 我们能够这样描写叙述这就像我们将创建其它类型的数组: */ function loggingIdentity2(arg) { console.log(arg.length); return arg; } /** *我们还能够写成这种模式 ,一个数组.length,这样避免很多其它的错误 */ function loggingIdentity3(arg) { console.log(arg.length); return arg; } |
Ts代码二
/** *在前面的章节中,我们创建了工作的范围内的类型的通用身份的功能。在本节中,我们将探讨的功能类型本身, *以及怎样创建通用接口.通用函数的类型就像那些非通用功能,具有类型參数首家上市,类似于函数声明 */ function identity3<T>(arg: T): T { return arg; } var myIdentity3: <T>(arg: T)=>T = identity3; /** * 我们也能够用不同的名称在类型一般类型參数,所以仅仅要类型变量的数量和怎样类型变量用于排队 */ function identity4<T>(arg: T): T { return arg; } var myIdentity4: <U>(arg: U)=>U = identity4; /** * 我们也能够写泛型类型为对象文本类型的调用签名 */ function identity5<T>(arg: T): T { return arg; } var myIdentity5: {<T>(arg: T): T} = identity5; /** * 这使我们写我们的第一个通用interface接口。让我们以字面对象从曾经的样例,它移动到一个界面: */ interface GenericIdentityFn1 { <T>(arg: T): T; } function identity6<T>(arg: T): T { return arg; } var myIdentity6: GenericIdentityFn1 = identity6; /** * 在一个类似的样例。我们可能要移动的通用參数是整个接口的參数。这让我们看到什么类型。我们是在通用 * (如:Dictionary<String>而不不过字典)。这使得该类型參数可见的接口的全部其它成员。 */ interface GenericIdentityFn2<T> { (arg: T): T; } function identity7<T>(arg: T): T { return arg; } var myIdentity7: GenericIdentityFn2<number> = identity7; |
Ts编译js代码二
/** * *在前面的章节中。我们创建了工作的范围内的类型的通用身份的功能。在本节中。我们将探讨的功能类型本身, *以及怎样创建通用接口.通用函数的类型就像那些非通用功能,具有类型參数首家上市,类似于函数声明 */ function identity3(arg) { return arg; } var myIdentity3 = identity3; /** * 我们也能够用不同的名称在类型一般类型參数,所以仅仅要类型变量的数量和怎样类型变量用于排队 */ function identity4(arg) { return arg; } var myIdentity4 = identity4; /** * 我们也能够写泛型类型为对象文本类型的调用签名 */ function identity5(arg) { return arg; } var myIdentity5 = identity5; function identity6(arg) { return arg; } var myIdentity6 = identity6; function identity7(arg) { return arg; } var myIdentity7 = identity7; |
8.3泛型类型与类
Ts代码
//泛型类也有类似形状的通用接口。 泛型类在尖括号泛型类型參数列表 //--T class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; } /*------number数字类型-----*/ var myGenericNumber = new GenericNumber<number>(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function(x, y) { return x + y; }; /*------string字符串类型-----*/ var stringNumeric = new GenericNumber<string>(); stringNumeric.zeroValue = ""; stringNumeric.add = function(x, y) { return x + y; }; alert(stringNumeric.add(stringNumeric.zeroValue, "test")); //-----------------Generic Constraints---- /*****声明一个接口,来约束**********/ interface ILength { length: number;//声明一个number类型 } //-function用extends关键继承这个ILength接口约束。 。 function loggingIdentity<T extends ILength>(arg: T): T { console.log(arg.length); //获取这个length值 return arg; } //调用这个loggingIdentity方法 var object=loggingIdentity({length: 10, value: 3}); /** *在使用泛型类的类型 *当我们用typescript去创建工厂的时候。因此有必要通过其构造函数来引用类类型 */ function create<T>(c: {new(): T; }): T { return new c(); } /** *使用:一个更高级的演示样例使用原型属性来判断和约束的构造函数和类类型的实例側之间的关系 */ //养蜂人 class BeeKeeper { hasMask: boolean; } //动物管理人. class ZooKeeper { nametag: string; } //动物 class Animals { numLegs: number; } //蜜蜂 class Bee extends Animals { keeper: BeeKeeper; } //狮子 class Lion extends Animals { keeper: ZooKeeper; } //管理人. function findKeeper<A extends Animals, K> (a: {new(): A; prototype: {keeper: K}}): K { return a.prototype.keeper; } //findKeeper(Lion).nametag; // 检查类型! /** *jQuery---- * */ $(function(){ var len=$(object).attr("length");//获取这个length值 var value=$(object).attr("value");//获取这个value值 //alert(len); //alert(value); //var obj1:Animals=Lion; //console.log( findKeeper(Lion).nametag);//检查类型! }); |
Ts 文件编译js代码
/** *Generic Classes * */ var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __(); }; //泛型类也有类似形状的通用接口。泛型类在尖括号泛型类型參数列表 //--T var GenericNumber = (function () { function GenericNumber() { } return GenericNumber; })(); /*------number数字类型-----*/ var myGenericNumber = new GenericNumber(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function (x, y) { return x + y; }; /*------string字符串类型-----*/ var stringNumeric = new GenericNumber(); stringNumeric.zeroValue = ""; stringNumeric.add = function (x, y) { return x + y; }; alert(stringNumeric.add(stringNumeric.zeroValue, "test")); //-function用extends关键继承这个ILength接口约束。 。 function loggingIdentity(arg) { console.log(arg.length); //获取这个length值 return arg; } //调用这个loggingIdentity方法 var object = loggingIdentity({ length: 10, value: 3 }); /** *在使用泛型类的类型 *当我们用typescript去创建工厂的时候,因此有必要通过其构造函数来引用类类型 */ function create(c) { return new c(); } /** *使用:一个更高级的演示样例使用原型属性来判断和约束的构造函数和类类型的实例側之间的关系 */ //养蜂人 var BeeKeeper = (function () { function BeeKeeper() { } return BeeKeeper; })(); //动物管理人. var ZooKeeper = (function () { function ZooKeeper() { } return ZooKeeper; })(); //动物 var Animals = (function () { function Animals() { } return Animals; })(); //蜜蜂 var Bee = (function (_super) { __extends(Bee, _super); function Bee() { _super.apply(this, arguments); } return Bee; })(Animals); //狮子 var Lion = (function (_super) { __extends(Lion, _super); function Lion() { _super.apply(this, arguments); } return Lion; })(Animals); //管理人. function findKeeper(a) { return a.prototype.keeper; } //findKeeper(Lion).nametag; // 检查类型! /** *jQuery---- * */ $(function () { var len = $(object).attr("length"); //获取这个length值 var value = $(object).attr("value"); //获取这个value值 //alert(len); //alert(value); //var obj1:Animals=Lion; //console.log( findKeeper(Lion).nametag);//检查类型! }); |
Html文件測试
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script> <script src="../test-4.js" type="text/javascript"></script> </head> <body> <div id="msg1"></div> <br/> <div id="msg2"></div> </body> </html> |
【第7篇】TypeScript泛型的案例代码具体解释的更多相关文章
- TypeScript 泛型及应用
TypeScript 泛型及应用 一.泛型是什么 二.泛型接口 三.泛型类 四.泛型约束 4.1 确保属性存在 4.2 检查对象上的键是否存在 五.泛型参数默认类型 六.泛型条件类型 七.泛型工具类型 ...
- TypeScript 泛型(generic) 入门介绍
TypeScript 泛型函数 下面来创建第一个使用泛型的例子:identity函数.这个函数会返回任何传入它的值.你可以把这个函数当成是echo命令.不用泛型的话,这个函数可能是下面这样: func ...
- iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController)
iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController) 这里我们就直接上实例: 一:新建一个项目singleV ...
- 用JS添加文本框案例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SQL Server 表的管理_关于事务的处理的详解(案例代码)
SQL Server 表的管理_关于事务的处理的详解(案例代码) 一.SQL 事务 1.1SQL 事务 ●事务是在数据库上按照一定的逻辑顺序执行的任务序列,既可以由用户手动执行,也可以由某种数据库程序 ...
- SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)
SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)-DML 1.SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL I ...
- SQL Server 表的管理_关于表的操作增删查改的操作的详解(案例代码)
SQL Server 表的管理_关于表的操作增删查改的操作的详解(案例代码) 概述: 表由行和列组成,每个表都必须有个表名. SQL CREATE TABLE 语法 CREATE TABLE tabl ...
- SQL Server 表的管理_关于事务操作的详解(案例代码)
SQL Server 表的管理_关于事务操作的详解(案例代码) 1.概念 事务(transaction): 是将多个修改语句组合在一起的方法,这个方法中的所有语句只有全部执行才能正确完成功能.即要么全 ...
- JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇
JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇 作为一个使用Java语言开发的程序员,我们都知道,要想运行Java程序至少需要安装JRE(安装JDK也没问题).我们也知道我们Java程序 ...
随机推荐
- Ajax应用查询员工信息
首先要用上一篇的步骤启动服务器,建立站点.然后在该站点下创建php文件和html文件. php代码如下,文件名为server.php <?php //设置页面内容是html编码格式是utf-8 ...
- JS高级——歌曲管理
1.将歌曲管理的CURD方法放到原型中 2.在构造函数中,我们只有一个属性是songList,因为音乐库不是共有的,如果将songList放入原型中,任何一个人的一次修改songList,都将把son ...
- [转]使用gdb调试异常
有时程序中有未捕获的异常会导致程序异常的行为甚至导致程序的直接退出. 这对服务器程序来说是不可接受的. 可以使用gdb的catch命令来帮助我们调试异常. 使用gdb捕获异常的扔出点(相当于在扔出异常 ...
- kickstart配置文件详解和system-config-kickstart (转载)
kickstart是什么 许多系统管理员宁愿使用自动化的安装方法来安装红帽企业 Linux.为了满足这种需要,红帽创建了kickstart安装方法.使用kickstart,系统管理员可以 ...
- (转)OGNL与值栈
http://blog.csdn.net/yerenyuan_pku/article/details/67709693 OGNL的概述 什么是OGNL 据度娘所说: OGNL是Object-Graph ...
- C# Winform 最大化后 任务栏还显示解决
//最大化 this.WindowState = FormWindowState.Maximized; //窗体最大化时 非全屏 不会遮盖任务栏 //去掉标题栏 this.FormBorderStyl ...
- Java单元测试 - TestNG
官网 Eclipse安装TestNG插件 与Junit相比 从Junit发展而来,开发者就是Junit小组的一个人 Test Suite不再需要硬编码,就像cf自动登录的脚本中一样,可以写到一个xml ...
- ARX中类型强制转换
比如 克隆 clone, 获得的是一个acrxobject, acrxobject *pobj=pployline->clone(); acdbpolyline *ppoly=acdbpolyl ...
- linux设置crontab定时执行脚本备份mysql
前言:mysqldump备份数据库命令 mysqldump -u root -psztx@2018 fengliuxiaosan > /dbbackup/fengliuxiaosan.sql## ...
- 手把手从python安装到setuptools、pip工具安装
一.python安装1.基础开发库 apt-get install gccapt-get install openssl libssl-dev 2.安装数据库和开发库 apt-get install ...