TypeScript 前端开发核心面试题解析
TypeScript 已成为现代前端开发的标配，尤其在 React、Vue、Angular 等主流框架中，几乎是技术面试的必考点。当前趋势更看重类型安全、高级类型工具的实际应用以及tsconfig 配置的深度理解。以下精选高频题目，分为基础、进阶、高阶三个部分，结合实战场景进行解析。
基础篇：理解 TypeScript 的核心价值
1. TypeScript 与 JavaScript 的区别
TypeScript 是 JavaScript 的超集，由 Microsoft 开发，最终编译为纯 JS 运行。核心差异在于：
- 静态类型检查：TS 在编译时捕获错误，JS 则是运行时错误。
- 特性丰富：支持接口、泛型、枚举、装饰器等面向对象特性。
- 维护性：提升 IDE 智能提示与代码可维护性，但需承担一定的学习成本。
2. 大厂为何推崇 TypeScript？
- 类型安全：减少拼写错误或类型不匹配导致的运行时 Bug。
- 重构友好：IDE 支持重命名、跳转与自动补全，降低重构风险。
- 团队协作：类型定义充当'文档'，明确接口契约。
- 大型项目必备：随着代码规模扩大，纯 JS 容易失控，TS 能有效约束边界。
3. 基本类型与特殊类型
原始类型包括 boolean、number、string、null、undefined、symbol、bigint、void。对象类型涉及 object、array、tuple、enum。
特殊类型中，any 关闭检查（不推荐），unknown 是安全版的任意类型，never 代表永不返回的值。
any、unknown、never 的区别
| 类型 | 描述 | 使用场景 | 安全性 |
|---|---|---|---|
| any | 任意类型，关闭检查 | 迁移旧项目、临时绕过 | 低 |
| unknown | 未知类型，需类型收窄 | API 返回不确定类型 | 高 |
| never | 永不存在的值 | 抛错函数、底部类型 | - |
示例：
let val: unknown = 'hello';
if (typeof val === 'string') {
// 类型收窄后可以使用 string 方法
console.log(val.toUpperCase());
}
进阶篇：考察实际编码能力
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 面试便不再困难。
