目录
深入理解 TypeScript：接口、泛型与自定义类型
从简单场景出发：定义一个 “人” 的对象
接口：规范对象结构的 “紧箍咒”
泛型：灵活多变的类型 “模板”
自定义类型：更灵活的类型定义方式
总结
在前端开发的领域中，TypeScript（以下简称 TS）凭借其强大的类型系统，为开发者们提供了更严谨、高效的开发体验。今天，我们就一起深入探讨 TS 中的接口、泛型和自定义类型这几个重要概念，看看它们如何助力我们编写出更健壮的代码。
从简单场景出发：定义一个 “人” 的对象
假设我们要在 JavaScript 中定义一个表示 “人” 的对象，代码可能是这样的：
javascript
let person = {
name: '张三',
age: 60
};
这样写看似没什么问题，但当项目逐渐庞大，代码变得复杂时，隐患就出现了。比如，我们可能会不小心拼错属性名，像把name写成nmae ，JavaScript 运行时并不会提示错误，这可能导致难以排查的 bug。而且，当这个对象在多个文件间传递、经过各种处理后，对象的结构变得难以追踪，属性访问也可能出现问题。这时候，TS 的优势就凸显出来了。
接口：规范对象结构的 “紧箍咒”
TS 中的接口可以用来规范对象的结构，确保对象具有特定的属性，并且属性类型正确。我们来定义一个接口，限制 “人” 对象的结构：
// 在types文件夹下的index.ts文件中定义接口
interface PersonInter {
id: string;
name: string;
age: number;
}
// 暴露接口
export { PersonInter };
在上述代码中，我们使用interface关键字定义了一个名为PersonInter的接口，它规定了一个 “人” 对象必须包含id（字符串类型）、name（字符串类型）和age（数字类型）这三个属性。
接下来，在使用这个接口的文件中，我们先引入它：
// 引入接口
import { PersonInter } from '@/types';
// 使用接口限制变量
let person: PersonInter = {
id: '001',
name: '张三',
age: 60
};
在这个示例里，我们定义了一个变量person，并使用PersonInter接口来限制它的类型。这样一来，如果我们不小心写错属性名，或者给属性赋予了错误类型的值，TS 编译器会立即报错，比如：
// 错误示例：属性名写错
let wrongPerson: PersonInter = {
id: '002',
nmae: '李四', // 这里会飘红报错，提示nmae不在PersonInter类型上
age: 20
};
通过接口的约束，我们在开发阶段就能发现很多潜在问题，大大提高了代码的可靠性。
泛型：灵活多变的类型 “模板”
当我们需要处理数组，且数组中的元素是符合特定接口的对象时，单纯使用接口就不够了。比如，我们要定义一个包含多个人的数组：
typescript
// 错误示例：直接使用接口限制数组会报错
let personList: PersonInter = [
{ id: '001', name: '张三', age: 60 },
{ id: '002', name: '李四', age: 18 },
{ id: '003', name: '王五', age: 5 }
];
上述代码会报错，因为PersonInter接口定义的是对象结构，而不是数组。这时候，泛型就派上用场了。泛型允许我们在定义函数、类或类型时，不指定具体的类型，而是在使用时再确定类型。
我们可以这样使用泛型来定义包含 “人” 对象的数组：
// 使用泛型定义数组类型
let personList: Array
{ id: '001', name: '张三', age: 60 },
{ id: '002', name: '李四', age: 18 },
{ id: '003', name: '王五', age: 5 }
];
在Array
typescript
// 错误示例：数组元素类型不符合
let wrongPersonList: Array
{ id: '001', name: '张三', age: 60 },
{ id: '002', name: '李四', age: 'eighteen' }, // 这里会飘红报错，age应该是number类型
{ id: '003', name: '王五', age: 5 }
];
泛型的灵活性不仅体现在数组上，在函数和类中也有广泛应用，能让我们编写更通用、可复用的代码。
自定义类型：更灵活的类型定义方式
除了接口，TS 还提供了自定义类型（type），它能让我们创建更灵活的类型别名。比如，我们可以使用自定义类型来定义包含 “人” 对象的数组：
// 定义自定义类型
type Persons = Array
// 使用自定义类型
let personList: Persons = [
{ id: '001', name: '张三', age: 60 },
{ id: '002', name: '李四', age: 18 },
{ id: '003', name: '王五', age: 5 }
];
在上述代码中，我们使用type关键字定义了一个名为Persons的自定义类型，它实际上是Array
自定义类型还可以用于联合类型、交叉类型等复杂类型的定义，例如：
// 联合类型：表示一个值可以是字符串或数字
type StringOrNumber = string | number;
// 交叉类型：表示一个对象同时具有两个接口的属性
interface A {
a: string;
}
interface B {
b: number;
}
type AB = A & B;
总结
接口、泛型和自定义类型是 TypeScript 中非常重要的特性。接口让我们可以规范对象的结构，提高代码的可读性和可维护性；泛型增加了代码的灵活性和复用性，使我们能够处理不同类型的数据；自定义类型则为我们提供了更灵活的类型定义方式，让代码更加简洁易读。
在实际项目开发中，合理运用这些特性，能够有效地减少错误，提升开发效率。希望通过这篇文章，大家对 TS 中的接口、泛型和自定义类型有更深入的理解和掌握，在今后的开发中能够编写出更优质的代码。