一文带你了解TypeScript泛型使用

快来打我* 2022-12-27 01:25 340阅读 0赞

目录

      • 本文概览：
        1. 泛型的基本使用
        1. 泛型变量
        1. 泛型函数
        1. 泛型类
        1. 泛型约束
        1. 泛型约束与索引类型
        1. 在多重类型中使用泛型约束
        1. 泛型与 new

本文概览：

在这里插入图片描述

1. 泛型的基本使用

any类型表示一个值可以为任意类型的时候：

  1. const getArray = (value: any, times: number = 5): any[] => { 
  2.   return new Array(times).fill(value);
  3. };
  5. getArray([1], 2).forEach(item => { 
  6.   console.log(item.length);
  7. });
  8. getArray(2, 3).forEach(item => { 
  9.   console.log(item.length);
  10. });

这个函数接收两个参数。第一个参数为任意类型的值，第二个参数为数值类型的值，默认为 5。函数的功能是返回一个以 times 为元素个数，每个元素都是 value 的数组。这个函数我们从逻辑上可以知道，传入的 value 是什么类型，那么返回的数组的每个元素也应该是什么类型。

调用了两次这个方法，使用 forEach 方法遍历得到的数组，在传入 forEach 的函数中获取当前遍历到的数组元素的 length 属性。

  • 第一次传入的值为数组，得到的会是一个二维数组[ [1], [1] ]。每次遍历的元素为[1]，它也是数组，所以打印它的 length 属性是可以的。
  • 第二次传入的值为数字 2，生成的数组是[2, 2, 2]，数字是没有 length 的，所以应该报错，但是这里却不会报错。因为在定义getArray函数时，指定了返回值是any类型的元素组成的数组，所以这里遍历其返回值中每一个元素时，类型都是any，所以不管做任何操作都是可以的。

所以要解决这种情况（指在传入参数时不确定参数的类型，而在使用的时候才能确定），就可以使用泛型。泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

对上面的例子可以这样改写：

  1. const getArray = <T>(value: T, times: number = 5): T[] => { 
  2.   return new Array(times).fill(value);
  3. };

在定义函数之前，使用<>符号定义了一个泛型变量 T，这个 T 在函数定义中就代表某一种类型，它可以是基础类型，也可以是高级类型。定义了泛型变量之后，在函数中任何需要指定类型的地方使用 T 都代表这一种类型。比如当传入 value 的类型为数值类型，那么返回的数组类型T[]就表示number[]。

  1. getArray<number[]>([1, 2], 3).forEach(item => { 
  2.   console.log(item.length);
  3. });
  4. getArray<number>(2, 3).forEach(item => { 
  5.   console.log(item.length); // 类型“number”上不存在属性“length”
  6. });

在调用 getArray 时，在方法名后面使用<>传入了泛型变量 T 的类型number[]，那么在定义 getArray 函数时使用 T 指定类型的地方，都会使用number[]指定。但是也可以省略这个<number[]>，TypeScript 会根据你传入函数的 value 值的类型进行推断：

  1. getArray(2, 3).forEach(item => { 
  2.   console.log(item.length); // 类型“number”上不存在属性“length”
  3. });

在定义泛型的时候，可以一次定义多个类型参数，比如可以同时定义泛型 T 和 泛型 U：

  1. function swap<T, U>(tuple: [T, U]): [U, T] { 
  2.     return [tuple[1], tuple[0]];
  3. }
  4. swap([7, 'seven']); // ['seven', 7]

2. 泛型变量

先来看一个例子：

  1. const getLength = <T>(param: T): number => { 
  2.   return param.length; // error 类型“T”上不存在属性“length”
  3. };

当我们获取一个类型为泛型的变量 param 的 length 属性值时，如果 param 的类型为数组 Array 或字符串 string 类型是没问题的，它们有 length 属性。但是如果此时传入的 param 是数值 number 类型，那这里就会有问题了。

现在假设我们想操作T类型的数组而不直接是T。由于我们操作的是数组，所以.length属性是应该存在的。 这样传入的类型最起码是数组是可以确定的，在这里泛型变量 T 当做类型的一部分使用，而不是整个类型，增加了灵活性。

  1. const getLength = <T>(param: T[]): T[] {
  2.     return param.length;
  3. }

3. 泛型函数

可以定义一个泛型函数类型：

  1. // 简单定义
  2. const getArray: <T>(arg: T, times: number) => T[] = (arg, times) => { 
  3.   return new Array(times).fill(arg);
  4. };
  5. // 使用类型别名
  6. type GetArray = <T>(arg: T, times: number) => T[];
  7. const getArray: GetArray = <T>(arg: T, times: number): T[] => { 
  8.   return new Array(times).fill(arg);
  9. };

还可以使用接口的形式来定义泛型函数类型：

  1. interface GetArray { 
  2.   <T>(arg: T, times: number): T[];
  3. }
  4. const getArray: GetArray = <T>(arg: T, times: number): T[] => { 
  5.   return new Array(times).fill(arg);
  6. };

还可以把接口中泛型变量提升到接口最外层，这样接口中所有属性和方法都能使用这个泛型变量了：

  1. interface GetArray<T> { 
  2.   (arg: T, times: number): T[];
  3.   tag: T;
  4. }
  5. const getArray: GetArray<number> = <T>(arg: T, times: number): T[] => { 
  6.   // error 不能将类型“{ <T>(arg: T, times: number): T[]; tag: string; }”分配给类型“GetArray<number>”。
  7.   // 属性“tag”的类型不兼容。
  8.   return new Array(times).fill(arg);
  9. };
  10. getArray.tag = "a"; // 不能将类型“"a"”分配给类型“number”
  11. getArray("a", 1); // 不能将类型“"a"”分配给类型“number”

上面将泛型变量定义在接口最外层，所以不仅函数的类型中可以使用 T，在属性 tag 的定义中也可以使用。但在使用接口的时候，要在接口名后面明确传入一个类型，也就是这里的GetArray<number>，那么后面的 arg 和 tag 的类型都得是 number 类型。如果还希望 T 可以是任何类型，可以把GetArray<number>换成GetArray<any>。

4. 泛型类

泛型除了可以在函数中使用，还可以在类中使用，它既可以作用于类本身，也可以作用与类的成员函数。

实现一个简单的栈：

  1. class Stack { 
  2.     private arr: number[] = []
  3.     public push(item: number) { 
  4.         this.arr.push(item)
  5.     }
  6.     public pop() { 
  7.         this.arr.pop()
  8.     }
  9. }

如果只是传入 number 类型就算了，可是需要不同的类型的时候，还得靠泛型的帮助。

  1. class Stack<T> { 
  2.     private arr: T[] = []
  3.     public push(item: T) { 
  4.         this.arr.push(item)
  5.     }
  6.     public pop() { 
  7.         this.arr.pop()
  8.     }
  9. }

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

5. 泛型约束

在使用泛型时，就意味着这个类型是任意的类型，但是我们有时是可以确定传入的泛型时属于哪一类的，比如上面的例子，当访问一个泛型类型的参数的length属性，会报错”类型“T”上不存在属性“length””，是因为并不是所有类型都有 length 属性。所以在这里应该对 T 有要求，它应该包含 length 属性。

可以使用接口定义一个对象必须有哪些属性：

  1. interface ValueWithLength { 
  2.   length: number;
  3. }
  4. const v: ValueWithLength = { }; // error Property 'length' is missing in type '{}' but required in type 'ValueWithLength'

泛型约束就是使用一个类型和extends对泛型进行约束，上面的例子可以改为这样：

  1. interface ValueWithLength { 
  2.   length: number;
  3. }
  4. const getLength = <T extends ValueWithLength>(param: T): number => { 
  5.   return param.length;
  6. };
  7. getLength("abc"); // 3
  8. getLength([1, 2, 3]); // 3
  9. getLength({  length: 3 }); // 3
  10. getLength(123); // error 类型“123”的参数不能赋给类型“ValueWithLength”的参数

这里泛型变量T受到约束。它必须满足接口ValueWithLength，也就是不管它是什么类型，都必须有一个length属性，且类型为数值类型。

对于上面实现的栈，我们也可以进行泛型约束，比如要求传入的泛型必须是number或者string类型，可以这样改写：

  1. type Params = number | string
  2. class Stack<T extends Params> { 
  3.     private arr: T[] = []
  4.     public push(item: T) { 
  5.         this.arr.push(item)
  6.     }
  7.     public pop() { 
  8.         this.arr.pop()
  9.     }
  10. }
  12. const stack1 = new Stack<boolean>() // 类型”boolean“不满足约束”Params“

6. 泛型约束与索引类型

先来看一个需求：设计一个函数，这个函数接受两个参数，一个参数是对象，另一个参数是对象上的属性，通过这两个参数返回这个属性的值：

  1. function getValue(obj: object, key: string) { 
  2.   return obj[key]  // error
  3. }

这个函数会得到一段报错：参数obj实际上是{}，因此后面的key是无法获取到任何值的。因为我们给参数 obj 定义的类型就是 object，在默认情况下它只能是 {}，但是我们接收的对象是各种各样的，我们需要一个泛型来表示传入的对象类型，比如 T extends object:

  1. function getValue<T extends object>(obj: T, key: string) { 
  2.   return obj[key]  // error
  3. }

这样依然会报错，因为第二个参数 key 是不是存在于 obj 上是无法确定的，因此需要对这个 key 也进行约束，把它约束为只存在于 obj 属性的类型，这个时候需要借助索引类型进行实现 <U extends keyof T>，我们用索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型，这里的泛型 U 被约束在这个联合类型中，这样一来函数就被完整定义了：

  1. function getValue<T extends object, U extends keyof T>(obj: T, key: U) { 
  2.   return obj[key]  // ok
  3. }
  5. const a = { 
  6.   name: 'TypeScript',
  7.   id: 996
  8. }
  10. getValue(a, name) // "TypeScript"

编译器也会进行提示：

在这里插入图片描述

7. 在多重类型中使用泛型约束

上面的例子都是通过单一类型对泛型进行约束，那如果我们的泛型需要被约束，它只被允许实现以下两个接口的类型呢？

  1. interface FirstInterface { 
  2.   doSomething(): number
  3. }
  4. interface SecondInterface { 
  5.   doSomethingElse(): string
  6. }

我们或许会在一个类中这样使用：

  1. class Demo<T extends FirstInterface, SecondInterface> { 
  2.   private genericProperty: T
  3.   useT() { 
  4.     this.genericProperty.doSomething()
  5.     this.genericProperty.doSomethingElse() // 类型“T”上不存在属性“doSomethingElse”
  6.   }
  7. }

但是只有 FirstInterface 约束了泛型 T，SecondInterface 并没有生效，上面的方法并不能用两个接口同时约束泛型。上述的语法就是错误的，那么应该如何用多重类型约束泛型呢?

实际上并不能在定义泛型约束的时候指定多个约束类型，但是可以将接口 FirstInterface 与 SecondInterface 作为超接口来解决问题：

  1. interface ChildInterface extends FirstInterface, SecondInterface { 
  2. }

这个时候 ChildInterface 是 FirstInterface 与 SecondInterface 的子接口，然后我们通过泛型约束就可以达到多类型约束的目的：

  1. class Demo<T extends ChildInterface> { 
  2.   private genericProperty: T
  3.   useT() { 
  4.     this.genericProperty.doSomething()
  5.     this.genericProperty.doSomethingElse()
  6.   }
  7. }

8. 泛型与 new

假设需要声明一个泛型拥有构造函数，比如：

  1. function factory<T>(type: T): T { 
  2.   return new type() // This expression is not constructable.
  3. }

编译器会告诉我们这个表达式不能构造，因为我们没有声明这个泛型 T 是构造函数，这个时候就需要 new 的帮助了。

  1. function factory<T>(type: { new(): T}): T { 
  2.   return new type() // ok
  3. }

参数 type 的类型 {new(): T} 就表示此泛型 T 是可被构造的，在被实例化后的类型是泛型 T。

发表评论

表情：
评论列表 （有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读