• 泛型函数
  • 泛型类

一、泛型函数

在泛型函数之前,先简单的描述一下泛型,将变量定义成泛型可以在使用变量时来决定它的类型。什么意思呢?假如现在有一个函数,可能出现参数和返回值出现多种情况的现象,只有在调用函数受参数时才能确定它们的类型,就可以将函数定义成一个泛型函数,然后在调用这个函数的时候设定参数和返回值的类型。

 function identity<T>(arg: T): T {
return arg;
}
console.log(identity<number[]>([1,2,3]));//[1,2,3]
console.log(identity<string>('aaa'));//aaa

泛型相关的内容相对比较简单,官方文档也是非常的详细,这里就不做太多分析,就针对各种基本应用展示一些示例:

 //可以这样写(参数和返回值使用泛型类型的数组类型)
function fun<T>(arg: T[]):T[]{
console.log(arg.length);
return arg;
}
//还可以这样这(参数使用泛型类型,返回值使用泛型类型的数组类型)
function fun1<T>(arg: T):T[]{
return [];
}
//但是,不能这样写
// function fun2<T>(arg: T[]):T{
// return arg.length;
// }

也可以将泛型函数作为泛型函数类型使用:

 function identity<T>(arg: T): T{
return arg;
}
let myIdentity: <U>(arg: U) => U = identity;

由上面的泛型函数类型应该就很容易想到,可不可以定义一个泛型接口?这当然是没有问题的:

 //定义泛型函数接口
interface GenericIdentityFn<T> {
(arg: T): T;
}
interface GenericIdentityFn<T> {
(arg: T): T;
}
//这里个泛型方法可以直接写成泛型函数接口的实现
//这里将它作为泛型函数类型
//用这个泛型函数类型的一个函数变量作为泛型函数接口的实现
function identity<T>(arg: T): T{
return arg;
}
//实现泛型函数接口
let myGenericIdentityfn : GenericIdentityFn<string | number | number[]> = identity;
identity('str');

然后,上面注释中还有一点忘了,实现泛型接口时可以给泛型传递多个类型,然后用或(|)运算符连接。

二、泛型类

泛型类与泛型函数非常类似,没有太多可说的,直接上代码,官方文档中的第一个示例只写了一个抽象像或者接口一样的class内容,所以要想正确的测试,需要补全代码,下面就是我补全的代码:

 class GenericNumber<T> {
zeroValue: T;
constructor(zero:T){
this.zeroValue = zero;
}
add(x: T, y: T):T[]{
return [x,y];
}
} let myGenericNumber = new GenericNumber<number>(0);
myGenericNumber.zeroValue = 100;
myGenericNumber.add(10,100);

可用使用泛型类接口的方式来解决在泛型函数中无法描述内部一些数据类型的问题,也是在官方的文档中给出了示例代码:

 interface Lengthwise {
length: number;
} function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // Now we know it has a .length property, so no more error
return arg;
}
console.log( loggingIdentity({length:10,value:3}) );

泛型类接口也被叫做泛型约束,简单的说就是定一个类类型接口,然后创建泛型方法或者类型的时候继承这个接口,然后再调用函数或者实例化类的时候根据类型类型接口,传入对应的类型值作为泛型的类型:

 interface G{
objG:object;
keyG:string;
}
function getProperty<T extends G>(obj:T['objG'], key:T['keyG']){
//return obj[key] -- 由于key是不确定的是没办法推断它的类型,所以没法被实现
return obj
} let x = { a: 1, b: 2, c: 3, d: 4 }; console.log( getProperty(x, "a")); // { a: 1, b: 2, c: 3, d: 4 }

在泛型里使用类型:简单的说就是泛型的类型是由指定class,所以被这个类型指定的参数或者返回值就是该类的实例化对象。

 //注意这个官方示例类定义时没有给成员变量初始化赋值,也没有实现构造赋值,所以所有类中的成员都会报错
class BeeKeeper {
hasMask: boolean;
}
class ZooKeeper {
nametag: string;
}
class Animal {
numLegs: number;
}
class Bee extends Animal {
keeper: BeeKeeper;
}
class Lion extends Animal {
keeper: ZooKeeper;
}
function createInstance<A extends Animal>(c: new () => A): A {
return new c();
}
createInstance(Lion).keeper.nametag; // typechecks!
createInstance(Bee).keeper.hasMask; // typechecks!

TypeScript入门六:TypeScript的泛型的更多相关文章

  1. typeScript入门(四)泛型

    泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能. 在像C#和Ja ...

  2. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  4. TypeScript入门四:TypeScript的类(class)

    TypeScript类的基本使用(修饰符) TypeScript类的抽象类(abstract) TypeScript类的高级技巧 一.TypeScript类的基本使用(修饰符) TypeScript的 ...

  5. TypeScript 入门自学笔记 — 类型断言(二)

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  6. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  7. TypeScript入门教程

    TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行(语法糖) TypeScript提供了类型系统,规范类似Ja ...

  8. typescript 入门教程一

    ##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...

  9. TypeScript入门一:配置TS工作环境

    配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...

随机推荐

  1. vue单页面项目架构方案

    这里的架构方案是基于vue-cli2生成的项目应用程序产生的,是对项目应用程序或者项目模板的一些方便开发和维护的封装.针对单页面的解决方案. 主要有四个方面: 一,不同环境下的分别打包 主要是测试环境 ...

  2. Java同步数据结构之LinkedTransferQueue

    前言 LinkedTransferQueue是Java并发包中最强大的基于链表的无界FIFO阻塞传输队列.从JDK7开始出现,Doug Lea说LinkedTransferQueue是Concurre ...

  3. oracle-密码

    Oracle 11g 默认用户名和密码安装ORACLE时,若没有为下列用户重设密码,则其默认密码如下: 用户名/密码 登录身份 说明sys/change_on_install SYSDBA 或 SYS ...

  4. WPF清爽酷炫的界面Mahapps.metro

    最近WPF项目中要求软件的风格要传统化一点,查阅了下资料发现了Mahapps.metro. 官网 http://mahapps.com/ 下面是官方的DOME,https://github.com/M ...

  5. mongodb 添加用户报错TypeError:db.addUser is not a function (mongodb3.4.1)

    1:问题如下: 原因是 新版的MongoDB已经不支持addUser方法了. 改成createUser了. 使用方法如下    2:具体解释一下db.createUser()方法的用法   定义: 创 ...

  6. OpenNESS,开源的边缘网络服务平台

    目录 文章目录 目录 参考文章 OpenNESS 的电梯间演讲 OpenNESS 与 ETSI MEC Edge Controller Software 的功能清单 Edge Platform Sof ...

  7. Python——使用Notepad++运行

    安装 安装python,安装完后找到python.exe,记录绝对路径,我的是:E:\log\python-3.7.4\python.exe 设置 用Notepad++打开python脚本,按F5会弹 ...

  8. Example config file /etc/vsftpd.conf

    # Example config file /etc/vsftpd.conf # # The default compiled in settings are fairly paranoid. Thi ...

  9. iOS-static和const联合使用;使用static const 与 #define

    static和const联合使用:   static将一个全局变量变成局部变量   const将一个局部变量变成局部常量 // 定义了一个局部常量      static const CGFloat ...

  10. windows10环境下pip安装Scrapy报错

    问题描述 当前环境win10,python_3.6.1,64位. 在windows下,在dos中运行pip install Scrapy报错: building 'twisted.test.raise ...