TypeScript -泛型知识点详情

泛型（Generics）是 TypeScript 的一个核心特性，它允许你在定义函数、接口或类的时候不预先确定具体的类型。泛型提供了一种方式来创建可重用的组件，这些组件可以在不同的类型上操作而无需修改代码。以下是 TypeScript 中泛型的详细知识点：

1. 泛型函数

泛型函数可以接受任何类型的参数，并返回相同类型的结果。

function identity<T>(arg: T): T {return arg;
}let output = identity<string>("myString"); // type is string
let output2 = identity<number>(1024); // type is number

2. 泛型接口

泛型接口允许你定义一个接口，它可以用于不同的类型。

interface GenericIdentityFn<T> {(arg: T): T;
}let myIdentity: GenericIdentityFn<number> = identity;

3. 泛型类

泛型类允许你创建一个类，它可以用于不同的类型。

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

4. 泛型约束

你可以对泛型进行约束，以确保它们支持特定的操作。

interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length); // 现在我们知道 T 有 length 属性return arg;
}loggingIdentity({ length: 10, value: 3 }).length; // OK

5. 泛型默认类型参数

在调用泛型函数时，如果省略了类型参数，TypeScript 会根据传入的参数自动推断类型。

function identity<T>(arg: T): T {return arg;
}// 由于传入了字符串，TypeScript 推断出 T 为 string
let output = identity("myString");

6. 泛型类型别名

泛型类型别名允许你创建一个泛型类型，它可以用于不同的类型。

type GenericIdentityFn<T> = (arg: T) => T;const myIdentity: GenericIdentityFn<number> = identity;

7. 泛型和联合类型

泛型可以与联合类型一起使用，以创建适用于多个类型的泛型函数。

function identity<T extends number | string>(arg: T): T {return arg;
}let output = identity(101); // number
let output2 = identity("hello"); // string

8. 泛型和类型别名

泛型可以与类型别名一起使用，以创建更复杂的类型。

type Container<T> = {value: T;
};const myContainer: Container<number> = { value: 1 };

9. 泛型和交叉类型

泛型可以与交叉类型一起使用，以创建具有多个类型的泛型函数。

type Lengthwise = {length: number;
};function extend<T extends Lengthwise, U extends Lengthwise>(first: T, second: U): T & U {const result = { ...first, ...second } as T & U;return result;
}const result = extend({ length: 10 }, { length: 20 });

10. 泛型和工具类型

TypeScript 提供了多种内置的泛型工具类型，如 Partial<T>, Readonly<T>, Record<K, T> 等，它们可以用于创建复杂的类型。

type Partial<T> = {[P in keyof T]?: T[P];
};interface Todo {title: string;description: string;
}type PartialTodo = Partial<Todo>;
const partialTodo: PartialTodo = { title: "Clean room" };