11. Typescript 泛型

1. 概述

泛型，在 TS 中是很重要的东西，例如 Vue3,其中用到非常多的泛型。它是一种将类型参数化的机制，可以在类、方法、接口中使用，允许在创建对象或调用方法时才明确特定类型。

通俗来讲，它就是用一个特殊符号代表了类型注解，当我们定义变量时，使用该特殊符号代替类型。在使用是再将类型传入。这样就可以使方法接口等等变得更加灵活。也就是动态类型。

2. 定义泛型

2.1. 普通定义

在下面的例子里，我们使用字母 T 来做泛型参数名，在使用时再将固定类型传入，这样的好处就是同样一个方法，value 可以通过我们传入类型的同，传入不同类型的参数，更加灵活。

css 复制代码

// 泛型
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
createArray<string>(3, 'x'); // ['x', 'x', 'x']

2.2. 多个参数类型泛型

我们也可以使用不同的泛型参数名，只要数量和使用方式能对应就可以。

arduino 复制代码

// 多个类型参数
function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]

2.3. 泛型接口

声明接口也可以使用泛型，在声明接口时，在名字后面加一个 <参数> ，在使用的时候传递类型

r 复制代码

// 泛型接口
interface CreateArrayFunc {
    <T>(length: number, value: T): Array<T>;
}
let createArray1: CreateArrayFunc;
createArray1 = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
}

2.4. 泛型类

ini 复制代码

// 泛型类
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

3. 泛型约束

当我们希望在一个泛型上做一些操作，比如获取 length 参数，然而，有些类型是不支持这些操作的。例如数字类型没有 length 属性，这个时候我们就可以使用泛型约束。约束其为具有 length 属性的类型。

需要使用 interface 接口。

typescript 复制代码

// 泛型约束
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;
}

4. 代码下载

📎泛型.ts