TypeScript 泛型

原因：

为什么要有泛型变量、泛型函数、泛型类型呢？

概念

泛型是什么：TODO

泛型变量：常用 T 表示，当然，你也可以使用 U 或任意

泛型类型：泛型 T 作为元素，整体作为其他类型子元素类型的情况

泛型类：class GenericNumberClass <T>，叫 泛型类，(2020 年 12 月 20 日 02:59:53 发现 deno 无法运行 泛型类 demo)

泛型约束：存在非法访问属性的情况，比如 .length

泛型的提出

在 TypeScript 中，为了解决函数的 输入类型 等同于 返回类型 而提出的一种新的声明方法

如果想要实现，输入的类型等于输出的类型，可能这么写，实例 1：

function inputTypeEqualOutputType(args: number): number {
  return args;
}
console.log('ret==>', inputTypeEqualOutputType(2020));

如果想返回其他类型，就不得不再写一遍，定义输入和输出类型一致的函数声明。

再或者，使用 any 来实现：

function useAnyType(args: any): any {
  return args;
}
console.log('any type:', useAnyType('any type'));

为了重用类型声明，以及表述输入和输出类似是一致的情况，TypeScript 提出的一种新的类型声明的方式——泛型。

常用 <T> 替代，现在改写实例 1：

function inputTypeEqualOutputType<T>(args: T): T {
  return args;
}
console.log('ret==>', inputTypeEqualOutputType(2020));

这样就只需要写一遍，就可以支持多种入参类型使用：

console.log('1. null:', inputTypeEqualOutputType(null));
console.log('2. undefined:', inputTypeEqualOutputType(undefined));
console.log('3. string:', inputTypeEqualOutputType('2020'));
console.log('4. number:', inputTypeEqualOutputType(2020));
console.log('5. boolean:', inputTypeEqualOutputType(true));
console.log('6. symbol:', inputTypeEqualOutputType(Symbol(11)));
console.log('7. object:', inputTypeEqualOutputType({ year: 2020 }));
console.log(
  '8. function:',
  inputTypeEqualOutputType(() => {})
);
console.log('9. array:', inputTypeEqualOutputType([2020]));

以上的完整写法，复杂的情况可能需要完整写法，一般情况，编译器可自动推断：

console.log('1. null:', inputTypeEqualOutputType<null>(null));
console.log('2. undefined:', inputTypeEqualOutputType<undefined>(undefined));
console.log('3. string:', inputTypeEqualOutputType<string>('2020'));
console.log('4. number:', inputTypeEqualOutputType<number>(2020));
console.log('5. boolean:', inputTypeEqualOutputType<boolean>(true));
console.log('6. symbol:', inputTypeEqualOutputType<symbol>(Symbol(11)));
console.log('7. object:', inputTypeEqualOutputType<object>({ year: 2020 }));
console.log(
  '8. function:',
  inputTypeEqualOutputType<Function>(() => {})
);
console.log('9. array:', inputTypeEqualOutputType<number[]>([2020]));

泛型变量

但是，此时的泛型，其实等同于入参类型是 any，返回类型也是 any，这意味着，输入类型是数字，打印 .length 是错误的：

function inputTypeEqualOutputType(args: any): any {
  console.log('length==>', args.length);
  return args;
}
console.log('error==>:', inputTypeEqualOutputType(2020));

T 作为其他类型的元素类型

T 类型也可以作为单独的元素类型被其他类型使用，比如数组：

function defineByArray<T>(arg: T[]): T[] {
  console.log('arg array length ==>', arg.length);
  return arg;
}
console.log('array element type T==>', defineByArray([2020, 3020]));

泛型类型

声明泛型类型：

function defineType<T>(arg: T): T {
  return arg;
}

let myDefineType: <T>(arg: T) => T = defineType; // 使用变量来接受函数

使用带有调用签名的对象字面量来定义泛型函数：

function defineTypeObject<T>(arg: T): T {
  return arg;
}

let myDefineTypeObject: { <T>(arg: T): T } = defineTypeObject;

泛型接口

与此同时，也可以将对象字面量单独拎出来作为一个接口使用，于是就有了泛型接口：

interface DefineType {
  <T>(arg: T): T;
}

function defineType<T>(arg: T): T {
  return arg;
}

let myDefineType: DefineType = defineType;

把泛型参数作为整个接口的参数，让用户知道具体是哪个泛型类型 (比如：DefineType<string> 而非 DefineType)，使得接口里的其他成员也能知道参数的类型：

interface DefineType<T>{
    (arg:T):T
}
function defineType<T>(arg:T):T{
    return arg
}

let myDefineType:DefineType<number>:defineType

此时，不再描述泛型函数，而是把非泛型函数前面作为泛型类型的一部分，当使用 define 函数时候，还得需要传入类型参数来指定泛型类型 (这里是：number)，锁定了之后代码里使用的类型。

这对于描述 哪部分类型 属于 泛型部分，理解 何时把参数 放在 调用签名里 和 何时放在接口上 是很有帮助的。

泛型类

• 无法创建 泛型枚举

• 无法创建 泛型命名空间

泛型类 与 泛型接口 差不多，泛型类使用 <> 括起泛型类型，跟在类名后面：

(注意：此处使用 Deno 运行，发现错误是 Property 'zeroValue' has no initializer and is not definitely assigned in the constructor.)

class GenericNumberClass <T>{
    zeroVal :T,
    add:(x:T,y:T)=>T
}

let myGenericNumberClass = new GenericNumberClass<number>()

myGenericNumberClass.zeroVal =0

myGenericNumberClass.add = function(x,y) {
    return x +y
}

此时，GenericNumberClass 并非只限制使用 number 类型，也可以使用 string：

class GenericNumberClass <T>{
    zeroVal :T,
    add:(x:T,y:T)=>T
}

let myGenericString = new GenericNumberClass<string>()

myGenericString.zeroVal = "2020"

myGenericString.add = function(x,y) {
    return x +y
}

console.log(myGenericString.add(myGenericString.zeroVal,"hello world"))

类包含两部分：静态部分 与 实例部分，泛型类 属于实例部分的类型，所以类的静态属性不能使用这个 泛型类型。

泛型约束

泛型声明，编译器并不能完全保证错误，比如当访问非法的属性时：

function loggingIdentity<T>(arg: T): T {
  console.log(arg.length); // number 不存在 length
  return arg;
}

loggingIdentity(2020);

所以，这需要我们限制函数，不要任意去访问带 .length 属性的所有类型。

仅当存在这个 .length 属性时，在允许，于是出现了 泛型约束，下面是使用 extends 关键词实现约束：

interface LengthWise {
  length: number;
}

function lengthFn<T extends LengthWise>(arg: T): T {
  console.log('T length ==>', arg.length);
  return arg;
}

console.log('number no length ==>', lengthFn(11)); // 错误

console.log('string has length ==>', lengthFn('11'));

console.log('string has length ==>', lengthFn({ length: 11, age: 99 }));

当不使用 泛型约束 前，编译器报错 error TS2339: Property 'length' does not exist on type 'T'.

使用了 泛型约束 后，编译器报错 error TS2345: Argument of type '11' is not assignable to parameter of type 'LengthWise'.

在泛型约束中使用类型参数

声明 类型参数 且被另外一个类型参数所约束。比如从对象中获取某个属性名，此时需要确保存在这个属性名：

function getProp<O, K extends keyof O>(obj: O, key: K) {
  return obj[key];
}

const x1 = { a: 1, b: 22, c: 33 };

console.log('a==>', getProp(x1, 'a'));
console.log('m==>', getProp(x, 'm')); 
// 错误：Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c"'. console.log("m==>",getProp(x1,"m"))

泛型里使用类类型

TypeScript 使用泛型创建工厂函数是，需要引用构造函数的类类型，比如：

function CreateClass<T>(c: { new (): T }): T {
  return new c();
}

使用原型类型推断并约束 构造函数 与 类实例 的关系：

class AClass {
  aName: boolean;
}

class BClass {
  bName: string;
}

class CClass {
  cName: number;
}

class DClass extends CClass {
  dName: AClass;
}

class EClass extends CClass {
  eClass: AClass;
  dName: BClass;
}

function createInstance<A extends CClass>(c: new () => A): A {
  return new c();
}

createInstance(EClass).cName.bName; // 类型检查
createInstance(DClass).cName.aName; // 类型检查