TypeScript 前端开发核心面试题解析

进阶篇：考察实际编码能力

1. 类型收窄方式

常见方式包括联合类型守卫、字面量类型守卫、自定义类型守卫（is 关键字）。 例如处理参数类型时：

function padLeft(value: string, padding: string | number) {
  if (typeof padding === 'number') {
    return [...Array(padding + 1)].join(' ') + value;
  }
  return padding + value;
}

2. 联合类型与交叉类型

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

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

3. 泛型的应用

泛型允许创建可复用组件，支持类型参数化。

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

常用于数组工具、Promise、React 组件 Props 等场景。

4. interface 与 type 的选择

• interface：适合定义对象，支持声明合并与扩展，推荐用于对象结构。
• type：适合定义联合、元组、映射及工具类型。

interface User { name: string; }
interface User { age?: number; } // 自动合并

type ID = string | number; // 联合类型

高阶篇：类型体操与工具类型

1. 内置工具类型

常用工具包括 Partial<T>（属性可选）、Required<T>（属性必选）、Readonly<T>（只读）、Pick<T, K>（挑选）、Omit<T, K>（排除）、Record<K, T>（键值对）。

type User = { name: string; age: number };
type PartialUser = Partial<User>; // { name?: string; age?: number }

2. 映射与条件类型

• 映射类型：通过 [K in keyof T] 遍历键创建新类型。

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

• 条件类型：T extends U ? X : Y，根据类型判断返回不同结果。

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

3. tsconfig.json 关键配置

• target：编译目标（如 es2020）。
• strict：开启所有严格检查（强烈推荐）。
• noImplicitAny：隐式 any 报错。
• strictNullChecks：null/undefined 严格检查。
• esModuleInterop：兼容 commonjs 模块导入。
• skipLibCheck：跳过库类型检查以加速编译。

实战应用与面试建议

1. 框架集成

• React：使用 .tsx 文件，定义 Props 类型（interface 或 type），配合 useState() 使用泛型。
• Vue：Vue 3 结合 <script setup lang="ts">，使用 defineProps() 定义属性。

2. 第三方库类型

若库无类型定义，优先安装 @types/库名。极端情况下可使用 declare module 或 any 断言，但不推荐长期使用。

3. 备考建议

• 项目实战：准备一个 TS + React/Vue 项目，能阐述类型如何提升代码质量。
• 类型练习：多刷 LeetCode TS 版或 Type Challenges。
• 关注更新：留意 TS 新版本特性，如 const type parameters 等。

掌握这些核心点，配合实际项目经验，TS 面试便不再困难。