TypeScript【1】 泛型【2】的高级应用
TypeScript 作为 JavaScript 的超集，提供了强大的类型系统，其中泛型是 TypeScript 中一个非常有用的特性。泛型允许我们在编写代码时定义可重用【3】的、类型安全【4】的组件。本文将深入探讨 TypeScript 泛型的高级应用，包括高级泛型技巧、泛型与类、泛型与接口以及泛型与工具类型【5】等。
一、高级泛型技巧
1. 泛型约束【6】
在 TypeScript 中，我们可以通过约束来限制泛型参数的类型。这可以通过 `extends` 关键字实现。
typescript
function loggingIdentity(arg: T): T {
console.log(arg.length); // Now we know it has a .length property, so no more error
return arg;
}
// 使用约束
loggingIdentity(100); // 正确
loggingIdentity("hello world"); // 正确
// loggingIdentity({ 123 as any }); // 错误，因为对象没有.length属性
2. 泛型映射类型【7】
泛型映射类型允许我们创建一个新的类型，它基于另一个类型，但对其属性进行修改。
typescript
type mappedType = {
[P in keyof T]: T[P];
};
// 使用映射类型
type mapped = mappedType;
// mapped 的类型是 { a: number; b: string };
3. 泛型条件类型【8】
泛型条件类型允许我们在类型推断时根据条件返回不同的类型。
typescript
type ConditionType = T extends string ? U : T;
// 使用条件类型
type myString = ConditionType; // myString 的类型是 number
type myNumber = ConditionType; // myNumber 的类型是 number
4. 泛型键选择【9】
泛型键选择允许我们从泛型类【10】型中选择特定的键。
typescript
type SelectKeys = Pick;
// 使用键选择
type myStringAndNumber = SelectKeys;
// myStringAndNumber 的类型是 { a: string; b: number };
二、泛型与类
泛型可以与类一起使用，以创建更灵活和可重用的类。
1. 泛型类
泛型类允许我们将类型参数作为类的类型参数。
typescript
class GenericNumber {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
2. 泛型约束在类中使用
我们可以在类中使用泛型约束来限制类的行为。
typescript
class Point {
x: T;
y: T;
constructor(x: T, y: T) {
this.x = x;
this.y = y;
}
}
let point = new Point(1, 2);
let point2 = new Point("a", "b");
三、泛型与接口
泛型可以与接口一起使用，以创建更灵活和可重用的接口。
1. 泛型接口【11】
泛型接口允许我们将类型参数作为接口的类型参数。
typescript
interface GenericIdentityFn {
(arg: T): T;
}
function identity(arg: T): T {
return arg;
}
let myIdentity: GenericIdentityFn = identity;
2. 泛型接口与类
泛型接口可以与类一起使用，以创建具有特定类型参数的类。
typescript
interface GenericIdentityFn {
(arg: T): T;
}
class GenericNumber {
zeroValue: T;
add: (x: T, y: T) => T;
}
// 使用泛型接口和类
let myIdentity: GenericIdentityFn = identity;
let genericNumber = new GenericNumber();
四、泛型与工具类型
TypeScript 提供了一些内置的工具类型，可以帮助我们更方便地使用泛型。
1. keyof【12】
`keyof` 操作符可以用来获取一个类型的所有键。
typescript
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // PersonKeys 的类型是 'name' | 'age'
2. typeof【13】
`typeof` 操作符可以用来获取一个变量的类型。
typescript
let age: number = 25;
type AgeType = typeof age; // AgeType 的类型是 number
3. Partial【14】
`Partial` 工具类型可以将一个类型的所有属性转换为可选。
typescript
interface Person {
name: string;
age: number;
}
type PartialPerson = Partial; // PartialPerson 的类型是 { name?: string; age?: number; }
4. Readonly【15】
`Readonly` 工具类型可以将一个类型的所有属性转换为只读。
typescript
interface Person {
name: string;
age: number;
}
type ReadonlyPerson = Readonly; // ReadonlyPerson 的类型是 { readonly name: string; readonly age: number; }
结论
泛型是 TypeScript 中一个强大的特性，它允许我们编写更灵活、可重用和类型安全的代码。通过理解并应用高级泛型技巧，我们可以更好地利用 TypeScript 的类型系统，提高代码质量和可维护性。本文介绍了高级泛型技巧、泛型与类、泛型与接口以及泛型与工具类型等内容，希望对您有所帮助。
Comments NOTHING