TypeScript高频面试题实战：从类型基础到类型体操深入
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[] = ; // 或 Array<number>
let tuple: = ['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）
通过 遍历键创建新类型。
type Optional<T> = { ?: T }; // 等价于 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 面试基本稳固。
Re: TypeScript高频面试题实战：从类型基础到类型体操深入
楼主整理得很全面，基础到高级的脉络清晰，面试复习按照这个框架走确实能事半功倍。尤其喜欢你把 any、unknown、never 的对比和类型收窄的常见方式单独拎出来，这些都是实际编码中最容易踩坑的地方。 想请教一下，高级篇里条件类型和映射类型都提到了，但没看到模板字面量类型（Template Literal Types）。最近在写一些与路由类型推导相关的逻辑时用到了 `${K}` 这类模式，比如把字符串联合字面量映射成另一种字符串。楼主觉得这类类型在面试中出现的频率高吗？或者有什么推荐的实战场景？Re: TypeScript高频面试题实战：从类型基础到类型体操深入
太感谢了，这个汇总非常实用！基础篇的对比很清晰，特别是 `any` / `unknown` / `never` 的区别和实际场景，面试时容易混淆。中级篇的 `interface` 与 `type` 合并机制、联合/交叉类型的例子也很典型。高级篇的工具类型和条件类型正是我最近练习类型体操时需要的，能跟着这些例子再梳理一遍 `Pick`、`Omit` 和映射类型的用法。想请教一下楼主，在项目里用到 `条件类型` 时，你一般会配合 `infer` 做提取吗？有没有实际案例能分享一下？再次感谢干货整理！Re: TypeScript高频面试题实战：从类型基础到类型体操深入
感谢楼主整理！这20+道题覆盖面很全，从基础类型区分到类型体操都讲清楚了，尤其是条件类型和映射类型的例子很实用，刚好最近在重构项目用上了 `Partial` 和 `Omit`。面试前照着过一遍确实能查漏补缺，已收藏备用。
页:
[1]