引言：从基础到结构化类型
在《TypeScript 基础介绍（一）》TypeScript基础介绍（一）-CSDN博客中，我们探讨了 TypeScript 的类型系统基础、联合类型、类型断言和类型守卫等核心特性。这些内容解决了 JavaScript 在类型检查和代码可读性方面的基础问题。然而，随着应用规模增长，我们需要更强大的工具来描述复杂对象结构、复用类型定义并实现类型安全的代码复用。本文 fly 将继续深入 TypeScript 的结构化类型系统，包括接口、类型别名、函数类型、泛型及类与接口的结合，通过实战案例展示如何构建健壮且可维护的类型系统。
目录
六、接口：定义对象的结构契约
接口（Interface）是 TypeScript 中描述对象形状的核心工具，它定义了对象必须包含的属性和方法，是实现代码契约化设计的基础。与基本类型不同，接口专注于描述复杂数据结构，确保不同部分的代码遵循一致的数据格式。
6.1 基础接口定义与使用
接口通过interface关键字声明，指定对象应包含的属性名称、类型及可选性：
// 定义用户接口
interface User {
id: number; // 必选属性
name: string; // 必选属性
age?: number; // 可选属性（使用?标记）
readonly email: string; // 只读属性（初始化后不可修改）
}
// 正确实现接口
const validUser: User = {
id: 1,
name: "Alice",
email: "alice@example.com"
};
// 错误示例：缺少必选属性id
const invalidUser: User = {
name: "Bob",
email: "bob@example.com"
// ❌ 类型 "{ name: string; email: string; }" 中缺少属性 "id"，但类型 "User" 中需要该属性
};
// 错误示例：修改只读属性
validUser.email = "new-email@example.com";
// ❌ 无法分配到 "email" ，因为它是只读属性
关键特性：
- 必选属性：默认情况下，接口属性为必填，实现时必须提供
- 可选属性：通过
?标记，允许对象缺少该属性（如age?: number） - 只读属性：通过
readonly关键字，确保属性初始化后不可修改（运行时仍可通过索引修改，但编译时会报错）
6.2 接口的索引签名：动态属性名
当对象属性名不确定但类型已知时，可使用索引签名定义键值对的类型约束：
// 字符串索引签名：键为string，值为number
interface NumberDictionary {
[key: string]: number;
length: number; // 允许，因为length是string类型键，值为number
// name: string; // ❌ 错误，值类型必须为number
}
// 数字索引签名：键为number，值为string
interface StringArray {
[index: number]: string;
}
const fruits: StringArray = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 输出: "apple"（TypeScript推断为string类型）
应用场景：处理 JSON 数据、配置对象等动态结构，同时保持类型安全。
6.3 接口继承：复用与扩展类型
接口支持通过extends关键字继承其他接口，实现类型复用和扩展：
// 基础接口
interface Person {
name: string;
age: number;
}
// 继承Person并添加职业属性
interface Employee extends Person {
department: string;
salary: number;
}
// 实现继承后的接口
const employee: Employee = {
name: "John",
age: 30,
department: "Engineering",
salary: 80000
};
// 多继承：同时继承多个接口
interface Contact {
phone: string;
}
interface Staff extends Person, Contact {
id: number;
}
const staff: Staff = {
name: "Jane",
age: 28,
phone: "123-456-7890",
id: 1001
};
优势：避免代码重复，构建层次化的类型体系，符合开闭原则（对扩展开放，对修改封闭）。
七、类型别名：创建自定义类型
类型别名（Type Alias）通过type关键字为已有类型创建新名称，支持基本类型、联合类型、交叉类型等复杂场景，是定义复用类型的灵活工具。
7.1 基础类型别名
为基本类型或联合类型创建别名，提升代码可读性：
// 为基本类型创建别名
type Age = number;
type Name = string;
// 为联合类型创建别名
type Status = "active" | "inactive" | "pending";
type ID = string | number;
// 使用类型别名
let userAge: Age = 25;
let userName: Name = "Alice";
let userStatus: Status = "active"; // 只能赋值指定的字符串字面量
let userId: ID = "user-123"; // 合法，string类型
userId = 456; // 合法，number类型
// 错误示例：赋值不在联合类型中的值
userStatus = "deleted";
// ❌ 类型 ""deleted"" 不能赋值给类型 "Status"
7.2 对象类型别名
与接口类似，类型别名可描述对象结构，但支持更复杂的组合：
// 对象类型别名
type Point = {
x: number;
y: number;
z?: number; // 可选属性
};
// 联合类型别名
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; sideLength: number }
| { kind: "triangle"; base: number; height: number };
// 使用类型别名计算面积
function calculateArea(shape: Shape): number {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "square":
return shape.sideLength ** 2;
case "triangle":
return (shape.base * shape.height) / 2;
default:
// exhaustive check（ exhaustive：彻底的）：确保覆盖所有可能的类型
const _exhaustiveCheck: never = shape;
return _exhaustiveCheck;
}
}
// 示例调用
console.log(calculateArea({ kind: "circle", radius: 5 })); // 输出: 78.5398...
console.log(calculateArea({ kind: "square", sideLength: 10 })); // 输出: 100
关键特性：支持联合类型、交叉类型等复杂组合，适合描述非对象类型（如基本类型、联合类型）。
八、函数类型：精确描述函数签名
TypeScript 允许通过函数类型表达式或接口定义函数的参数和返回值类型，确保函数调用的类型安全。
8.1 函数类型表达式
直接在函数变量或参数中定义类型：
// 定义函数类型：(参数1: 类型, 参数2: 类型) => 返回值类型
type AddFunction = (a: number, b: number) => number;
// 使用函数类型
const add: AddFunction = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5
// 错误示例：参数类型不匹配
const subtract: AddFunction = (a: string, b: number) => a - b;
// ❌ 不能将类型 "(a: string, b: number) => number" 分配给类型 "AddFunction"
// 函数作为参数时的类型
function calculate(operation: AddFunction, x: number, y: number): number {
return operation(x, y);
}
console.log(calculate(add, 10, 20)); // 输出: 30
8.2 接口定义函数类型
通过接口的调用签名描述函数结构，适合需要扩展属性的函数：
// 接口定义函数类型（调用签名）
interface GreetFunction {
(name: string, greeting?: string): string; // 函数参数和返回值
defaultGreeting: string; // 函数额外属性
}
// 实现接口
const greet: GreetFunction = (name, greeting = greet.defaultGreeting) => {
return `${greeting}, ${name}!`;
};
greet.defaultGreeting = "Hello";
// 调用函数
console.log(greet("Alice")); // 输出: "Hello, Alice!"
console.log(greet("Bob", "Hi")); // 输出: "Hi, Bob!"
8.3 函数参数的高级类型
详细讲解函数参数的类型细节，包括可选参数、默认参数、剩余参数：
// 可选参数：使用?标记，必须放在必选参数之后
function logUser(name: string, age?: number): void {
console.log(`Name: ${name}, Age: ${age ?? "Unknown"}`);
}
logUser("Alice"); // 输出: "Name: Alice, Age: Unknown"
// 默认参数：指定默认值，自动成为可选参数
function createUser(name: string, role: string = "user"): { name: string; role: string } {
return { name, role };
}
console.log(createUser("Bob")); // 输出: { name: "Bob", role: "user" }
// 剩余参数：使用...收集多个参数为数组
function sum(...numbers: number[]): number {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10
最佳实践：为所有公共函数添加完整的类型注解，特别是参数和返回值类型，提升代码可读性和重构安全性。
九、泛型：编写可复用的类型安全代码
泛型（Generics）是 TypeScript 实现类型复用的核心机制，允许在定义函数、接口或类时不指定具体类型，而在使用时动态指定，实现 "一次定义，多种类型复用"。
9.1 泛型函数：适应多种类型
定义一个可处理不同类型数据的函数，同时保持类型安全：
// 泛型函数：T是类型变量，代表传入的类型
function identity<T>(arg: T): T {
return arg; // 返回与输入相同类型的值
}
// 使用泛型函数（显式指定类型）
const num: number = identity<number>(42);
const str: string = identity<string>("hello");
// 类型推断（推荐）：TypeScript自动推断T为传入的类型
const bool = identity(true); // T被推断为boolean类型
// 泛型函数示例：获取数组第一个元素
function getFirstElement<T>(array: T[]): T | undefined {
return array[0];
}
// 使用示例
const numbers = [1, 2, 3];
const firstNum = getFirstElement(numbers); // 推断为number | undefined
console.log(firstNum); // 输出: 1
const strings = ["a", "b", "c"];
const firstStr = getFirstElement(strings); // 推断为string | undefined
9.2 泛型约束：限制类型范围
使用extends关键字约束泛型只能是特定类型或具有特定属性：
// 泛型约束：T必须具有length属性
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): T {
console.log(`Length: ${arg.length}`);
return arg;
}
logLength("hello"); // 输出: "Length: 5"（string有length属性）
logLength([1, 2, 3]); // 输出: "Length: 3"（数组有length属性）
// logLength(42); // ❌ 错误，number没有length属性
// 泛型约束：使用keyof获取对象键的联合类型
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const user = { name: "Alice", age: 25 };
console.log(getProperty(user, "name")); // 输出: "Alice"（类型为string）
console.log(getProperty(user, "age")); // 输出: 25（类型为number）
// getProperty(user, "email"); // ❌ 错误，"email"不是user的键
9.3 泛型接口与类
将泛型应用于接口和类，创建可复用的类型组件：
// 泛型接口
interface Box<T> {
value: T;
getValue: () => T;
}
// 实现泛型接口
const numberBox: Box<number> = {
value: 100,
getValue: () => numberBox.value
};
const stringBox: Box<string> = {
value: "TypeScript",
getValue: () => stringBox.value
};
// 泛型类
class Stack<T> {
private items: T[] = [];
push(item: T): void {
this.items.push(item);
}
pop(): T | undefined {
return this.items.pop();
}
}
// 使用泛型类
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 输出: 2
const stringStack = new Stack<string>();
stringStack.push("a");
stringStack.push("b");
console.log(stringStack.pop()); // 输出: "b"
泛型的价值：在保持类型安全的同时，大幅提升代码复用性，是开发通用库和组件的基础。
十、类与接口：面向对象编程的类型约束
TypeScript 结合了面向对象编程和类型系统，允许通过接口约束类的实现，确保类遵循特定的结构。
10.1 类实现接口
使用implements关键字使类遵循接口定义的结构：
// 定义接口
interface Animal {
name: string;
makeSound(): void;
}
// 类实现接口
class Dog implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log("Woof!");
}
// 类可以有接口之外的方法
fetch(): void {
console.log(`${this.name} is fetching the ball`);
}
}
// 实例化类
const dog = new Dog("Buddy");
dog.makeSound(); // 输出: "Woof!"
dog.fetch(); // 输出: "Buddy is fetching the ball"
// 错误示例：未实现接口的方法
class Cat implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
// ❌ 错误，Cat类缺少"makeSound"方法的实现
}
10.2 类的类型继承与接口实现结合
类可以同时继承另一个类并实现接口，实现代码复用和接口约束的双重目的：
// 基础类
class Vehicle {
speed: number;
constructor(speed: number) {
this.speed = speed;
}
move(): void {
console.log(`Moving at ${this.speed} km/h`);
}
}
// 接口
interface Flyable {
altitude: number;
fly(): void;
}
// 继承类并实现接口
class Airplane extends Vehicle implements Flyable {
altitude: number;
constructor(speed: number, altitude: number) {
super(speed); // 调用父类构造函数
this.altitude = altitude;
}
// 重写父类方法
move(): void {
console.log(`Flying at ${this.speed} km/h and ${this.altitude} m altitude`);
}
// 实现接口方法
fly(): void {
console.log("Taking off!");
}
}
// 使用类
const plane = new Airplane(900, 10000);
plane.fly(); // 输出: "Taking off!"
plane.move(); // 输出: "Flying at 900 km/h and 10000 m altitude"
十一、交叉类型：组合多个类型
交叉类型（Intersection Types）使用&符号将多个类型合并为一个，新类型包含所有类型的属性和方法，适用于组合对象结构。
// 定义两个接口
interface HasName {
name: string;
}
interface HasAge {
age: number;
}
// 交叉类型：同时包含HasName和HasAge的属性
type Person = HasName & HasAge;
// 使用交叉类型
const person: Person = {
name: "Alice",
age: 25
};
// 交叉类型与联合类型的区别
type A = { a: number } & { b: string }; // 必须同时有a和b
type B = { a: number } | { b: string }; // 可以有a或b或两者都有
// 复杂交叉类型示例
type WithId = { id: string };
type User = HasName & HasAge & WithId;
const user: User = {
id: "user-123",
name: "Bob",
age: 30
};
注意：交叉类型不适合基本类型组合（如string & number会得到never类型，因为没有值同时是 string 和 number）。
十二、类型别名 vs 接口：何时选择哪种方式
类型别名和接口都可用于定义对象结构，但在使用场景上有明确区别，选择正确的工具能提升代码清晰度和可维护性。
12.1 核心区别对比
| 特性 | 类型别名（type） | 接口（interface） |
|---|---|---|
| 定义范围 | 可描述任意类型（对象、联合、基本类型等） | 主要用于描述对象结构和函数类型 |
| 扩展方式 | 通过交叉类型（type A = B & { ... }） |
通过继承（interface A extends B） |
| 合并声明 | 不支持重复声明合并 | 支持重复声明自动合并 |
| 计算属性 | 支持（如type Keys = keyof T） |
支持，但语法更复杂 |
12.2 最佳实践建议
优先使用接口当：
- 定义对象结构且需要继承或被继承
- 需要自动合并声明（如扩展第三方库类型）
- 描述类的公共 API（更符合面向对象思维）
优先使用类型别名当：
- 定义联合类型、交叉类型或基本类型别名
- 描述元组类型（如
type Point = [number, number]） - 需要使用计算属性或条件类型
// 接口合并示例（接口特有）
interface Config {
apiUrl: string;
}
interface Config {
timeout: number;
}
// 自动合并为 { apiUrl: string; timeout: number }
const config: Config = {
apiUrl: "https://api.example.com",
timeout: 5000
};
// 类型别名不支持合并
type Settings = { theme: string };
// type Settings = { layout: string }; // ❌ 错误，重复的标识符"Settings"
结语
本文深入探讨了 TypeScript 的结构化类型特性，包括接口、类型别名、函数类型、泛型、类与接口的结合及交叉类型等核心概念。这些工具共同构成了 TypeScript 强大的类型系统，使开发者能够构建类型安全、可维护且高度复用的代码。