• 泛型函数
  • 泛型类

一、泛型函数

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

 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. kotlin之lambda表达式和匿名函数

    lambda表达式,称为匿名函数,是一种函数字面值,也就是没有声明的函数,但可以作为表达式传递出去. 函数类型: 对于接受另一个函数的作为自己的参数,必须针对这个参数指定一个函数的类型如 fun &l ...

  2. fastjson在将Map<Integer, String>转换成JSON字符串时,出现中文乱码问题

    fastjson在将Map<Integer, String>转换成JSON字符串时,出现中文乱码问题. 先记下这个坑,改天在看看是怎么导致的,暂时通过避免使用Integer作为键(使用St ...

  3. cv2.bitwise_and的应用,

    import cv2 import numpy as np Load two images img1 = cv2.imread('messi.png') img2 = cv2.imread('logo ...

  4. LODOP直接导出图片不弹框

    之前有博文测试了导出图片的图片长度关系,是直接弹窗的选择保存路径的方式:Lodop导出图片,导出单页内容的图片最近测试下不弹窗保存图片是否可以,样例是保存的excel,测试了下图片,图片也是可以的,该 ...

  5. Debezium系列随笔

    0.Debezium简介 1.Run Debezium for Mysql in docker step by step 2.Run Debezium for SQLServer in docker ...

  6. CF1187E Tree Painting

    思路: 树形dp,首先使用dp计算以1为根的时候的最大分数,同时得到各个子树i的最大分数dp[i].然后利用前面得到的dp数组分别计算以其他每个点作为根的时候的最大分数. 实现: #include & ...

  7. 【VS开发】QueryPerformanceFrequency与QueryPerformanceCounter的使用

    LARGE_INTEGER tima,timb; QueryPerformanceCounter(&tima); 在 Windows Server 2003 和 WindowsXP 中使用 Q ...

  8. JS实现对数组进行自定义排序

    /** * 数组排序 * @param source 待排序数组 * @param orders 排序字段数组 * @param type 升序-asc 倒序-desc * 调用:var res =  ...

  9. Django soft-delete软删除

    在django中,实现这个功能很简单,我们采用一个字段用来保存删除的时间.若记录没有被删除,那么设置该值为None,如果被删除,那么设置时间为删除的时间. class BaseSchema(model ...

  10. 【贪心科技】贪心科技内容合伙人关于AI公司及创业的演讲笔记

    贪心科技内容合伙人关于AI公司及创业的演讲笔记 视频 目录 一.投资角度对 AI 的两个基本认知 二.简单分析 AI 公司的两个纬度四个层面 三.AI 垂直行业应用的三点中美对比 四.给创业者的四个建 ...