前端高频面试题：TypeScript 核心考点与实战解析

联合与交叉类型

• 联合类型 (|)：值可以是其中一种，如 string | number。
• 交叉类型 (&)：值必须同时满足所有类型，常用于对象合并。

type A = { a: string };
type B = { b: number };
type C = A & B; // { a: string; b: number }

泛型的应用

泛型让组件具备复用性，支持类型参数化。在数组工具、Promise 及框架 Props 定义中随处可见。

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>('hello');

Interface 与 Type 的选择

两者都能定义对象，但适用场景不同：

• Interface：支持声明合并，适合扩展对象结构。
• Type：支持联合、元组及原始类型别名，灵活性更高。

推荐对象/接口优先用 interface，复杂映射或联合用 type。

高级篇：类型体操与工具

大厂面试常涉及标准库中的工具类型，掌握其原理能应对复杂场景。

• Partial：所有属性可选
• Required：所有属性必选
• Pick<T, K> / Omit<T, K>：挑选或排除属性
• Record<K, T>：键值对映射

映射与条件类型

通过 [K in keyof T] 遍历键创建新类型，配合条件类型 T extends U ? X : Y 可实现更复杂的逻辑推断。

type Optional<T> = {
  [P in keyof T]?: T[P];
};

type IsString<T> = T extends string ? 'yes' : 'no';

配置与实战

tsconfig.json 关键配置

• target：编译目标版本
• strict：开启严格模式（强烈推荐）
• noImplicitAny：隐式 any 报错
• esModuleInterop：优化 CommonJS 导入

框架集成与第三方库

在 React/Vue 项目中，建议直接使用 .tsx 文件并定义 Props 类型。遇到第三方库无类型定义时，首选安装 @types/库名，其次使用 declare module 声明，最后才考虑 any 断言。

掌握上述知识点，结合 LeetCode 类型挑战题练习，能有效提升在类型系统方面的竞争力。