面试题：TypeScript类型别名的扩展与接口扩展的区别及应用场景

Question

阐述TypeScript中类型别名扩展和接口扩展在语法、功能及适用场景上的区别。例如，在处理联合类型和交叉类型的扩展时，两者有何不同，并各举一个实际应用场景的例子。

Answer 1

语法区别

• 类型别名扩展：使用 & 运算符进行交叉类型扩展。例如：

type BaseType = { name: string };
type ExtendedType = BaseType & { age: number };

• 接口扩展：使用 extends 关键字。例如：

interface BaseInterface {
  name: string;
}
interface ExtendedInterface extends BaseInterface {
  age: number;
}

功能区别

• 处理联合类型扩展：
  • 类型别名：通过 | 运算符构建联合类型，且可直接在类型别名定义时使用。例如：

type StringOrNumber = string | number;
type ExtendedUnion = StringOrNumber | boolean;

- **接口**：接口本身不支持联合类型扩展，因为接口主要用于定义对象类型结构。若要实现类似功能，需借助类型别名。例如：

interface StringType { type: 'string'; value: string; }
interface NumberType { type: 'number'; value: number; }
type UnionInterface = StringType | NumberType;

• 处理交叉类型扩展：
  • 类型别名：使用 & 运算符，可将多个类型合并，新类型拥有所有合并类型的成员。例如上面 BaseType 和 ExtendedType 的例子。
  • 接口：使用 extends 关键字，子接口继承父接口的所有成员，并可添加新成员。

适用场景区别

• 类型别名扩展：
  • 场景：适用于多种类型的组合，特别是联合类型的构建，以及需要灵活处理不同类型交叉的场景。比如，在函数重载中对参数类型的多种可能性定义。
  • 示例：

type SuccessResponse = { status: 'success'; data: any };
type ErrorResponse = { status: 'error'; message: string };
type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status ==='success') {
    console.log('Data:', response.data);
  } else {
    console.log('Error:', response.message);
  }
}

• 接口扩展：
  • 场景：主要用于对象类型的继承与扩展，在面向对象编程中，当需要定义具有相似结构但又有差异的对象类型时非常有用。例如，在定义不同类型的用户（普通用户、管理员用户等），它们有一些共同属性，同时又有各自特有的属性。
  • 示例：

interface User {
  username: string;
  email: string;
}
interface AdminUser extends User {
  role: 'admin';
}
function greetUser(user: User) {
  console.log(`Hello, ${user.username}`);
}
function manageAdmin(admin: AdminUser) {
  console.log(`${admin.username} (admin) can manage the system.`);
}