美文网首页让前端飞Web前端之路JavaScript 进阶营
【第7篇】TypeScript泛型的案例代码详解

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

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

    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泛型的案例代码详解

        本文链接：https://www.haomeiwen.com/subject/apzsxctx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        让前端飞

        Web前端之路

        JavaScript 进阶营

        前端开发

        前端开发笔记

        关于我们|服务条款|联系我们|【第7篇】TypeScript泛型的案例代码详解|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！