【第7篇】TypeScript泛型的案例代码详解

作者: 爱学习的蹭蹭 | 来源:发表于2019-06-09 07:53 被阅读13次

【第7篇】TypeScript泛型的案例代码详解
Typescript入门之：泛型
【第8篇】TypeScript的Mixin案例代码详解
TypeScript中的泛型以及条件类型中的推断
2020-11-05Typescript（2.2）
泛型程序设计
TS 泛型＋装饰器
03_TypeScript学习(三)
bunny笔记|TS基础(2)：泛型函数、泛型约束、在泛型约束中
泛型

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;
}

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;

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>

工程源代码

TypeScript泛型的案例代码详解

博客所有文章是本人2014年撰写,而GItHub的源代码是有些是2014年与2015年进行整理，由于在2013年项目接触TypeScript，同时在当年接触KendoUI开发的时候TypeScript的影子，故一年后决定把官方文档所有API文档认真琢磨了一遍，并且撰写成一本最全的中文TypeScript入门指南详解案例教程与代码,当初的下载量还是比较高的。由于最近接触Kotlin，自从学习TypeScript，它的语法对我后面学习Kotlin有了极大的帮助，个人感觉，它的语法跟ActionScript，Swift写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

【第7篇】TypeScript泛型的案例代码详解
1、最简单泛型例子 Ts代码 Js文件 2、泛型类型与接口 Ts代码一 Ts编译js代码一 Ts代码二 Ts编译j...
Typescript入门之：泛型
Typescript 泛型 <> 泛型是为了提高代码的重用性和代码的通用性使用泛型泛型其实是将一种或者多种类型...
【第8篇】TypeScript的Mixin案例代码详解
1、Mixin使用 Ts代码 Js代码工程源代码 TypeScript的Mixin案例代码详解博客所有文章是本...
TypeScript中的泛型以及条件类型中的推断
泛型 TypeScript 中泛型设计的目的是使在成员之间提供有意义的约束，为代码增加抽象层和提升可重用性。泛型可...
2020-11-05Typescript（2.2）
泛型 Generics---typeScript中最难的一部分泛型 Generics---约束泛型泛型 Gen...
泛型程序设计
诚心推荐这一篇文章更好 java 泛型详解泛型程序设计泛型意味着编写的代码可以被不同类型重用 ArrayLis...
TS 泛型＋装饰器
typescript 中的泛型泛型的定义泛型函数泛型类泛型接口泛型：软件工程中，我们不仅要创建一致的定义良好的...
03_TypeScript学习(三)
一. TypeScript枚举类型二. 枚举类型的值三. 认识泛型四. 泛型实现类型参数化五. 泛型的基本...
bunny笔记|TS基础(2)：泛型函数、泛型约束、在泛型约束中
01 typescript的操纵类型 02 03 04 泛型约束 05 在泛型约束中使用类型参数 06 在泛型中使...
泛型
目录一、泛型引入——一个打印机案例引发的思考二、泛型写法——提高代码复用性三、类型约束四、关联类型打印机案例 ...