面试题：TypeScript 中接口和类型别名的区别

Question

请详细阐述在 TypeScript 中接口（interface）和类型别名（type alias）在定义、功能、使用场景等方面的区别，并各举一个实际应用的例子。

Answer 1

定义区别

• 接口（interface）：使用 interface 关键字定义，主要用于定义对象的形状（shape），即对象所具有的属性和方法。例如：

interface User {
  name: string;
  age: number;
  sayHello(): void;
}

• 类型别名（type alias）：使用 type 关键字定义，可以为任何类型创建别名，包括基本类型、联合类型、交叉类型等。例如：

type StringOrNumber = string | number;

功能区别

• 接口（interface）：
  • 可重复声明，编译器会自动将重复声明合并。例如：

interface User {
  name: string;
}
interface User {
  age: number;
}
// 此时User接口有name和age属性

- 主要用于定义对象类型结构，对对象的属性和方法进行约束。
- 可实现接口继承，通过 `extends` 关键字来扩展已有接口。例如：

interface Animal {
  name: string;
}
interface Dog extends Animal {
  bark(): void;
}

• 类型别名（type alias）：
  • 不能重复声明，重复声明会报错。
  • 功能更通用，不仅可以定义对象类型，还能为基本类型、联合类型、交叉类型等创建别名。例如交叉类型：

type Admin = { name: string };
type Employee = { age: number };
type AdminEmployee = Admin & Employee;

- 类型别名可以通过 `&` 实现类似接口继承的效果，但本质上是交叉类型。

使用场景区别

• 接口（interface）：
  • 当需要定义对象的公共结构，尤其是在面向对象编程风格中，用于定义类实现的契约时，接口是很好的选择。例如定义一个 Form 组件的 props 接口：

interface FormProps {
  formData: { [key: string]: any };
  onSubmit: (data: { [key: string]: any }) => void;
}
function Form({ formData, onSubmit }: FormProps) {
  // 组件逻辑
}

• 类型别名（type alias）：
  • 当需要为基本类型、联合类型、交叉类型创建简洁的别名时，使用类型别名。比如在处理函数参数可能是不同类型的情况：

type Callback = (data: string | number) => void;
function processData(data: string | number, callback: Callback) {
  callback(data);
}