TypeScript 前端高频面试题精选与实战解析

中级篇：编码实战与类型推导

这一部分主要考察对联合、交叉、泛型及类型守卫的理解。

1. 类型收窄（Type Narrowing）有哪些方式？

除了常见的 typeof、instanceof、in 操作符，还可以利用字面量守卫或自定义 is 关键字。比如处理参数类型不一致时：

function padLeft(value: string, padding: string | number) {
  if (typeof padding === 'number') {
    // 这里 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. 泛型（Generics）的应用场景？

泛型让组件具备复用性，支持类型参数化。常见于数组工具、Promise、React 组件 Props 等。

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

4. interface 和 type 该怎么选？

这是一个经典问题。简单总结：

• interface：适合定义对象结构，支持声明合并（同名接口自动扩展），便于扩展。
• type：适合定义联合类型、元组、映射类型或原始类型别名。

推荐策略：对象/接口优先用 interface，复杂类型组合用 type。

interface User {
  name: string;
}
// 同名接口会自动合并
interface User {
  age?: number;
}

type ID = string | number;

高级篇：类型体操与配置优化

大厂深挖环节，通常涉及内置工具类型和高级语法。

1. tsconfig.json 关键配置

• target：编译目标（如 es2020）。
• module：模块系统（esnext/commonjs）。
• strict：强烈建议开启，包含所有严格检查。
• noImplicitAny：隐式 any 报错。
• strictNullChecks：严格检查 null/undefined。
• esModuleInterop：优化 CommonJS 模块导入。
• skipLibCheck：跳过库文件类型检查，提升编译速度。

2. 映射类型（Mapped Types）

通过 [K in keyof T] 遍历键来创建新类型，这是实现工具类型的基础。

type Optional<T> = {
  [K in keyof T]?: T[K];
}; // 等价于 Partial<T>

3. 条件类型（Conditional Types）

类似三元运算符的类型版本：T extends U ? X : Y。

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

4. 常用工具类型

• Partial<T>：所有属性可选。
• Required<T>：所有属性必选。
• Readonly<T>：所有属性只读。
• Pick<T, K> / Omit<T, K>：挑选或排除属性。
• Record<K, T>：键为 K，值为 T 的对象。
• Exclude<T, U> / Extract<T, U>：从联合类型中排除或提取。

示例：

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

实战应用：框架集成

1. React/Vue 中的 TS 实践

• React：使用 .tsx 后缀，Props 定义推荐使用 interface 或 type，配合 useState 时注意泛型推断。
• Vue 3：在 <script setup lang="ts"> 中使用 defineProps() 定义类型，体验更佳。

2. 第三方库没有类型定义怎么办？

首选方案是安装 @types/库名（DefinitelyTyped）。如果实在没有，可以使用 declare module '库名' 声明，或者极端情况下用 any 断言，但这会牺牲类型安全，需谨慎。

面试建议

• 准备项目：最好有一个 TS + React/Vue 的个人项目，面试时能具体说明类型如何提升了代码质量。
• 多练类型体操：LeetCode TS 版或 GitHub 上的 Type Challenges 是很好的练习材料。
• 关注新特性：留意 TS 5.x 的新特性，如 const type parameters 等。

这些题目覆盖了大部分大厂考察点，背熟概念的同时更要理解背后的原理，这样在面试中才能灵活应对。