前端高频面试题：TypeScript 核心考点与实战解析
TypeScript 已成为现代前端开发的标配，尤其在 React、Vue、Angular 等框架中，几乎是大厂必考点。当前面试趋势更关注类型安全、高级类型工具、实际项目应用和tsconfig 配置。以下精选高频题，分为基础、中级、高级，并附详细解答和代码示例。
基础篇（必背，考察理解 TS 核心价值）
TypeScript 是什么？它与 JavaScript 的区别
TypeScript 是 JavaScript 的超集，由 Microsoft 开发，最终编译成纯 JS 运行。
主要区别：
- 静态类型检查：TS 在编译时捕获错误，JS 则是运行时错误。
- OOP 特性：TS 支持接口、泛型、枚举、装饰器等。
- 编译过程：TS 需要
tsc编译，JS 直接运行。 - 维护性：TS 提升 IDE 智能提示和代码可维护性，但增加学习成本。
为什么大厂项目都要用 TypeScript？
- 类型安全：编译时发现拼写错误或类型不匹配，减少运行时 bug。
- 重构友好：IDE 支持重命名、跳转、自动补全，改动更安心。
- 团队协作：类型即文档，明确接口契约。
- 生态支持：React/Vue/Angular 官方推荐 TS。
- 大型项目必备：代码规模大时，纯 JS 容易失控。
基本类型有哪些？
原始类型包括 boolean、number、string、null、undefined、symbol、bigint、void。
对象类型涵盖 object、array、元组 tuple、枚举 enum。
特殊类型有 any（任意，关闭检查，不推荐）、unknown（未知，安全版 any）、never（永不返回）。
any、unknown、never 的区别
| 类型 | 描述 | 使用场景 | 安全性 |
|---|---|---|---|
| any | 任意类型，关闭类型检查 | 迁移旧 JS 项目、临时绕过 | 低 |
| unknown | 未知类型，必须先类型收窄 | API 返回不确定类型 | 高 |
| never | 永不存在的值（如抛错函数） | 类型推断的底部类型 | - |
示例：
let val: unknown = 'hello';
if (typeof val === 'string') {
// 类型收窄
console.log(val.toUpperCase());
}
联合类型与交叉类型
- 联合类型 (
|)：值可以是其中一种，例如string | number。 - 交叉类型 (
&)：值必须同时满足两种类型，常用于对象合并。
示例：
type A = { a: string };
type B = { b: number };
type C = A & B; // { a: string; b: number }
类型收窄（Type Narrowing）
常见方式包括 typeof 检查原始类型、instanceof 检查实例、in 检查属性、字面量类型守卫以及自定义类型守卫（is 关键字）。
示例：
function padLeft(value: string, padding: string | number) {
if (typeof padding === 'number') {
return Array(padding + 1).join(' ') + value;
}
return padding + value;
}
interface 和 type 的区别
| 特性 | interface | type |
|---|---|---|
| 定义对象 | 是（主要用途） | 是 |
| 支持扩展 | 是 | 是（用 & 交叉类型） |
| 声明合并 | 是（同名接口自动合并） | 否 |
| 联合/元组 | 否 | 是 |
| 原始类型别名 | 否 | 是 |
推荐：对象/接口用 interface（支持合并，便于扩展）；联合、映射、工具类型用 type。
interface User {
name: string;
}
interface User {
age?: number;
}
// 自动合并
type ID = string | number;
中级篇（高频，考察实际编码能力）
泛型（Generics）是什么？
泛型允许创建可复用组件，支持类型参数化。
示例：
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>('hello'); // T 推断为 string
场景：数组工具、Promise、React 组件 props、Vue defineProps 等。
高级篇（大厂深挖，考察类型体操）
常用工具类型
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 }
tsconfig.json 关键配置
target：编译目标（如 es2020）module：模块系统（如 esnext/commonjs）strict：开启所有严格检查（强烈推荐）noImplicitAny：隐式 any 报错strictNullChecks：null/undefined 严格检查esModuleInterop：更好导入 commonjs 模块skipLibCheck：跳过库类型检查（加速编译）
映射类型与条件类型
映射类型通过 [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'
实战应用题（框架相关高频）
在 React/Vue 项目中如何使用 TypeScript？
- React：用
.tsx，定义 props 类型（interface 或 type），配合useState()。 - Vue：Vue 3 + TS 用
<script setup lang="ts">，结合defineProps()。
如何处理第三方库没有类型定义？
- 用
declare module '库名';或安装@types/库名（DefinitelyTyped）。 - 极端情况可用
any断言，但不推荐。
面试建议
- 准备项目：准备一个 TS + React/Vue 的个人项目，面试时能说类型如何提升代码质量。
- 多练类型体操：LeetCode TS 版、Type Challenges（GitHub）。
- 关注新特性：TS 5.x 的 const type parameters、infer 改进等。
这些题覆盖了大部分大厂考察点，背熟 + 理解原理，TS 面试稳过！
