• 泛型函数
  • 泛型类

一、泛型函数

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

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

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

  1. //可以这样写(参数和返回值使用泛型类型的数组类型)
  2. function fun<T>(arg: T[]):T[]{
  3. console.log(arg.length);
  4. return arg;
  5. }
  6. //还可以这样这(参数使用泛型类型,返回值使用泛型类型的数组类型)
  7. function fun1<T>(arg: T):T[]{
  8. return [];
  9. }
  10. //但是,不能这样写
  11. // function fun2<T>(arg: T[]):T{
  12. // return arg.length;
  13. // }

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

  1. function identity<T>(arg: T): T{
  2. return arg;
  3. }
  4. let myIdentity: <U>(arg: U) => U = identity;

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

  1. //定义泛型函数接口
  2. interface GenericIdentityFn<T> {
  3. (arg: T): T;
  4. }
  5. interface GenericIdentityFn<T> {
  6. (arg: T): T;
  7. }
  8. //这里个泛型方法可以直接写成泛型函数接口的实现
  9. //这里将它作为泛型函数类型
  10. //用这个泛型函数类型的一个函数变量作为泛型函数接口的实现
  11. function identity<T>(arg: T): T{
  12. return arg;
  13. }
  14. //实现泛型函数接口
  15. let myGenericIdentityfn : GenericIdentityFn<string | number | number[]> = identity;
  16. identity('str');

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

二、泛型类

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

  1. class GenericNumber<T> {
  2. zeroValue: T;
  3. constructor(zero:T){
  4. this.zeroValue = zero;
  5. }
  6. add(x: T, y: T):T[]{
  7. return [x,y];
  8. }
  9. }
  10.  
  11. let myGenericNumber = new GenericNumber<number>(0);
  12. myGenericNumber.zeroValue = 100;
  13. myGenericNumber.add(10,100);

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

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

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

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

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

  1. //注意这个官方示例类定义时没有给成员变量初始化赋值,也没有实现构造赋值,所以所有类中的成员都会报错
  2. class BeeKeeper {
  3. hasMask: boolean;
  4. }
  5. class ZooKeeper {
  6. nametag: string;
  7. }
  8. class Animal {
  9. numLegs: number;
  10. }
  11. class Bee extends Animal {
  12. keeper: BeeKeeper;
  13. }
  14. class Lion extends Animal {
  15. keeper: ZooKeeper;
  16. }
  17. function createInstance<A extends Animal>(c: new () => A): A {
  18. return new c();
  19. }
  20. createInstance(Lion).keeper.nametag; // typechecks!
  21. 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. linux内核中rtc框架选用什么接口来注册rtc设备呢?

    1. 有哪些接口? 1.1 devm_rtc_device_register 1.2  devm_rtc_allocate_device和 rtc_register_device 2. 1.1与1.2 ...

  2. LC 986. Interval List Intersections

    Given two lists of closed intervals, each list of intervals is pairwise disjoint and in sorted order ...

  3. 数据分析 - Excel 综合实例 - 杜邦分析法

    项目背景 杜邦分析法 利用 杜邦分析法完成对一份数据的动态分析 流程图如下 项目源数据 左侧为竖向的数据管理, 右侧为横向的数据管理 横向的数据管理在数据透视的时候会很不方便, 并不推荐 常用叫法左边 ...

  4. natively 在本地机器

    ​For JavaScript-based projects, it makes sense to have a command line task runner that executes Java ...

  5. mvn安装

    先安装jdk.jre,maven需要jdk.jre支持 1.安装 jdk 卸载自带jdk rpm -qa | grep jdk rpm -e --nodeps 下载 JDK JDK 下载地址:http ...

  6. node-sass 安装失败解决方案

    从失败到成功,尝试了不下20,最终终于解决了: 解决方案如下: 参考方案一:http://www.jianshu.com/p/89f5e094b8ce(具体的配置看这个) 参考方案二:http://b ...

  7. pip安装pillow——死循环:[WinError5] & [TypeError:'module' object is not callable]

    1.这次本来要安装个pillow,记得以前装了的,怎么这次就不行了.然后,下意识的使用:pip3 install pillow. 发现报错: [TypeError:'module' object is ...

  8. python基础----条件判断与循环

    一.python数据类型 1.整数(包括整数.负数) 2.浮点数(小数) 3.字符串(需要用单引号‘’或双引号“”括起来) 注:当字符串中含有单引号时,用双引号括起来(now="let's ...

  9. bootstrap table checkbox获得选中得数据

    var idlist = $('#table').bootstrapTable('getAllSelections');     for (var i = 0; i < idlist.lengt ...

  10. bootstrap基础学习【网格系统】(三)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...