【第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>