TypeScript（TS）已经成为现代前端开发的标配，尤其在 React、Vue、Angular 等框架中几乎是大厂必考点。2026 年的面试趋势更注重类型安全、高级类型工具和实际项目应用。以下精选 20+ 高频面试题，按基础、中级、高级分类，附带详细解答和代码示例，适合结合项目实战记忆。
一、基础篇：理解 TS 核心价值
1. TypeScript 与 JavaScript 的区别
TypeScript 是 JavaScript 的超集（superset），由 Microsoft 开发，编译为纯 JS 运行。主要区别：
- TS 支持静态类型检查，在编译时捕获错误；JS 是动态类型，错误在运行时暴露。
- TS 提供了接口、泛型、枚举、装饰器等面向对象特性。
- TS 需要编译（使用 tsc 命令），JS 可以直接运行。
- TS 能提升代码可维护性和 IDE 智能提示，但增加了学习成本。
大厂项目青睐 TS 的原因：类型安全减少运行时 bug；IDE 支持重构（重命名、跳转、自动补全）；类型作为“文档”明确接口契约；React/Vue/Angular 官方推荐；大型项目代码量失控时，纯 JS 难以维护。
2. 基本类型与特殊类型
原始类型：boolean、number、string、null、undefined、symbol、bigint、void。
对象类型：object、array、tuple（元组）、enum（枚举）。
特殊类型：any（任意，关闭类型检查，不推荐）、unknown（未知，安全版 any）、never（永不存在的值）。
- let isDone: boolean = false;
- let num: number = 6;
- let str: string = 'hello';
- let list: number[] = [1, 2, 3]; // 或 Array<number>
- let tuple: [string, number] = ['hello', 10]; // 元组
3. any、unknown、never 的区别
any：任意类型，关闭类型检查，适合迁移旧 JS 项目时临时绕过，但安全性低。
unknown：未知类型，必须先进行类型收窄才能操作，适合 API 返回不确定类型时使用。
never：永不存在的值，常用于抛出错误的函数或类型推断的底部。
- let val: unknown = 'hello';
- if (typeof val === 'string') { // 类型收窄
- console.log(val.toUpperCase());
- }
二、中级篇：实际编码能力考察
1. interface 与 type 的区别
interface 主要用于定义对象类型，支持声明合并（同名接口自动合并），推荐用于对象/接口定义。type 支持联合、元组、原始类型别名，支持交叉类型（&）扩展，但不能声明合并。
- interface User { name: string; }
- interface User { age?: number; } // 自动合并
- type ID = string | number;
- type A = { a: string };
- type B = { b: number };
- type C = A & B; // { a: string; b: number }
2. 泛型的应用场景
泛型允许创建可复用组件，支持类型参数化。常见场景：数组工具函数、Promise、React 组件 props、Vue 的 defineProps 等。
- function identity<T>(arg: T): T {
- return arg;
- }
- let output = identity<string>('hello'); // T 推断为 string
3. 联合类型与交叉类型
联合类型（|）：值可以是其中一种类型，例如 string | number。
交叉类型（&）：值必须同时满足所有类型，常用于对象合并。
4. 类型收窄的常用方式
- typeof 检查原始类型
- instanceof 检查实例
- in 检查属性
- 字面量类型守卫（===）
- 自定义类型守卫（is 关键字）
- function padLeft(value: string, padding: string | number) {
- if (typeof padding === 'number') {
- return Array(padding + 1).join(' ') + value; // padding 被收窄为 number
- }
- return padding + value;
- }
三、高级篇：类型体操与配置
1. 常用工具类型（Utility Types）
- 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 }
2. 条件类型（Conditional Types）
通过 T extends U ? X : Y 实现条件判断。
- type IsString<T> = T extends string ? 'yes' : 'no';
- type Test1 = IsString<'hello'>; // 'yes'
3. 映射类型（Mapped Types）
通过 [K in keyof T] 遍历键创建新类型。
- type Optional<T> = { [P in keyof T]?: T[P] }; // 等价于 Partial<T>
4. tsconfig.json 关键配置
target：编译目标（如 es2020）
module：模块系统（如 esnext/commonjs）
strict：开启所有严格检查（强烈推荐）
noImplicitAny：隐式 any 报错
strictNullChecks：null/undefined 严格检查
esModuleInterop：更好地导入 CommonJS 模块
skipLibCheck：跳过库类型检查，加速编译
四、实战应用题：框架相关高频问题
1. React/Vue 项目中如何使用 TypeScript？
React：使用 .tsx 文件，用 interface 或 type 定义 props 类型，useState() 自动推断类型。
Vue：使用 Vue 3 + TS，在 <script setup lang="ts"> 中通过 defineProps() 定义 props 类型。
2. 第三方库缺少类型定义怎么办？
优先安装 @types/库名（来自 DefinitelyTyped）。如果没有，可以使用 declare module '库名' 声明模块。万不得已时用 any 断言，但非常不推荐。
五、面试建议
准备一个基于 TS 的 React/Vue 个人项目，面试时能举例说明类型如何提升代码质量。平时多练习类型体操（可参考 Type Challenges 或 LeetCode TS 版）。关注 TS 新特性，如 5.x 的 const type parameters、infer 改进等。以上内容覆盖了 95% 以上的大厂考察点，背熟并理解原理，TS 面试基本稳固。 |
发表于 
发表于