TypeScript 基础介绍（二）

引言：从基础到结构化类型

在《TypeScript 基础介绍（一）》TypeScript基础介绍（一）-CSDN博客中，我们探讨了 TypeScript 的类型系统基础、联合类型、类型断言和类型守卫等核心特性。这些内容解决了 JavaScript 在类型检查和代码可读性方面的基础问题。然而，随着应用规模增长，我们需要更强大的工具来描述复杂对象结构、复用类型定义并实现类型安全的代码复用。本文 fly 将继续深入 TypeScript 的结构化类型系统，包括接口、类型别名、函数类型、泛型及类与接口的结合，通过实战案例展示如何构建健壮且可维护的类型系统。

引言：从基础到结构化类型

六、接口：定义对象的结构契约

6.1 基础接口定义与使用

6.2 接口的索引签名：动态属性名

6.3 接口继承：复用与扩展类型

七、类型别名：创建自定义类型

7.1 基础类型别名

7.2 对象类型别名

八、函数类型：精确描述函数签名

8.1 函数类型表达式

8.2 接口定义函数类型

8.3 函数参数的高级类型

九、泛型：编写可复用的类型安全代码

9.1 泛型函数：适应多种类型

9.2 泛型约束：限制类型范围

9.3 泛型接口与类

十、类与接口：面向对象编程的类型约束

10.1 类实现接口

10.2 类的类型继承与接口实现结合

十一、交叉类型：组合多个类型

十二、类型别名 vs 接口：何时选择哪种方式

12.1 核心区别对比

12.2 最佳实践建议

结语

六、接口：定义对象的结构契约

接口（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); // 输出: 1const 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()); // 输出: 2const 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"