目录
- 前言
- 回顾接口与类
- 1. 泛型函数
- 2. 泛型接口
- 3. 泛型类
- 4. 泛型约束
- 5. 多重类型参数与默认类型
- a. 多重类型参数
- b. 默认类型参数
- 结语
前言
在前三章中,我们介绍了 TypeScript 的基础知识、函数与对象类型。在本章中,我们将探讨更高级的类型和类型操作,包括联合类型、交叉类型、字面量类型、类型断言、类型兼容性和类型守卫等内容。通过这些高级特性,你将能够编写出更加灵活和强大的代码。
- TS 入门(一):TypeScript 简介与安装
- TS 入门(二):Typescript类型与类型注解
- TS 入门(三):Typescript函数与对象类型
- TS 入门(四):TypeScript 高级类型与类型操作
- TS 入门(五):TypeScript接口与类
回顾接口与类
在上一章中,我们学习了以下内容:
- 接口:包括基本接口、可选属性和只读属性、函数类型接口、可索引类型、接口继承。
- 类:包括基本类、类的成员、构造函数、继承和派生类、公有、私有和受保护的修饰符、静态属性和方法、抽象类。
正文开始
,如果觉得文章对您有帮助,请帮我三连+订阅,谢谢
💖💖💖
1. 泛型函数
泛型函数允许你在定义函数时指定类型参数,而不是具体的类型。这样可以在函数内部使用不同的类型。
typescript">function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("我的名字"); // 输出类型为 'string'
let output2 = identity<number>(100); // 输出类型为 'number'
console.log(output1); // "我的名字"
console.log(output2); // 100
泛型函数还可以使用类型推断,根据传入的参数自动确定类型。
typescript">let output3 = identity("自动推断类型"); // 输出类型为 'string'
console.log(output3); // "自动推断类型"
2. 泛型接口
你可以使用泛型为接口定义类型参数,从而使接口更加灵活。
typescript">interface GenericIdentityFn<T> {
(arg: T): T;
}
function identity2<T>(arg: T): T {
return arg;
}
let myIdentity: GenericIdentityFn<number> = identity2;
console.log(myIdentity(42)); // 42
3. 泛型类
泛型也可以应用于类,使类能够处理不同的类型。
typescript">class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
constructor(zeroValue: T, addFn: (x: T, y: T) => T) {
this.zeroValue = zeroValue;
this.add = addFn;
}
}
let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.add(5, 10)); // 15
4. 泛型约束
有时候我们希望泛型类型满足一定的条件,可以通过泛型约束来实现。
typescript">interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // 现在我们知道arg有length属性了
return arg;
}
loggingIdentity({ length: 10, value: 3 }); // 输出: 10
// loggingIdentity(3); // 错误,number类型没有length属性
5. 多重类型参数与默认类型
a. 多重类型参数
泛型函数和类可以接受多个类型参数。
typescript">function map<T, U>(array: T[], transform: (item: T) => U): U[] {
let result: U[] = [];
for (let item of array) {
result.push(transform(item));
}
return result;
}
let numbers = [1, 2, 3];
let strings = map(numbers, num => num.toString());
console.log(strings); // ["1", "2", "3"]
b. 默认类型参数
你可以为泛型参数指定默认类型,这样在没有明确传入类型参数时将使用默认类型。
typescript">class Container<T = string> {
content: T;
constructor(content: T) {
this.content = content;
}
}
let stringContainer = new Container("这是一个字符串");
console.log(stringContainer.content); // "这是一个字符串"
let numberContainer = new Container<number>(42);
console.log(numberContainer.content); // 42
结语
通过本章的学习,你应该对 TypeScript 中的泛型编程有了更深入的理解。掌握泛型将使你能够编写更加灵活和可重用的代码。在下一章中,我们将继续探讨 TypeScript 中的模块与命名空间,包括导入和导出、默认导出、重命名导入和导出、命名空间等内容。务必掌握好每个概念,它们将为你后续学习 TypeScript 提供坚实的基础。