TypeScript 类、泛型的使用实践记录:探讨TypeScript中的泛型的使用方法和场景,以及如何使用类型约束来增加代码的灵活性和安全性;| 青训营

72 阅读2分钟

第六篇文章了.

TypeScript的泛型(Generics)是一种创建可重用的组件的工具,这种组件可以适用于多种类型的数据,而不仅仅是一个。与使用 any 类型不同,泛型允许用户在使用这些组件时保留类型信息。

实践例子如下: 想了想第一个就写这个吧,

1. 泛型类:

```class GenericClass<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericClass<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

console.log(myGenericNumber.add(myGenericNumber.zeroValue, 10));  // 输出 10

定义了一个名为 GenericClass 的类,这个类有一个类型参数 T,还有一个名为 add 的方法,这个方法接受两个参数,它们的类型都是 T

感觉泛型类看起来与普通类差不多,只是类名后面有一个尖括号里的类型参数罢了.

2. 泛型约束:

定义泛型的时候,由于预先并不知道它们代表的类型,所以不能随意地访问相应类型的方法或属性。这时,可以对泛型进行约束。

```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;
}

loggingIdentity({length: 10, value: 3});  // 输出: 10

义了一个接口 Lengthwise,它包含一个属性 length。然后,使用 extends 关键字对泛型 T 进行约束,使得泛型 T 必须符合 Lengthwise 的形状。

3. 在泛型约束中使用类型参数:

声明一个类型参数,该参数来自于另一个类型参数.

```function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

console.log(getProperty(x, "a")); // 输出:1
console.log(getProperty(x, "m")); // 错误:Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'.

在 getProperty 函数中,K extends keyof T 表示 K 必须是 T 的一个键。这样在函数中就可以安全地访问 obj[key],并且类型也得到了保证。

暂时就写这一些了,一会还得去做别的事儿.