当前位置：首页 > news >正文

2026TypeScript前端高频面试题总结大全(最新版)

news 2026/6/29 21:50:54

TypeScript（TS）已成为现代前端开发的标配，尤其在 React、Vue、Angular 等框架中，几乎是大厂必考点。2026 年面试趋势：更注重类型安全、高级类型工具、实际项目应用和tsconfig 配置。以下精选 20+ 高频题（基于最新大厂真题汇总），分为基础、中级、高级，并附详细解答和代码示例。建议结合项目实战记忆！

基础篇（必背，考察理解 TS 核心价值）

什么是 TypeScript？它与 JavaScript 的区别是什么？
TypeScript 是 JavaScript 的超集（superset），由 Microsoft 开发，最终编译成纯 JS 运行。
主要区别：
- TS 支持静态类型检查（编译时捕获错误），JS 是动态类型（运行时错误）。
- TS 有接口、泛型、枚举、装饰器等 OOP 特性。
- TS 需要编译（tsc），JS 直接运行。
- TS 提升代码可维护性、IDE 智能提示，但增加学习成本。
为什么大厂前端项目都要用 TypeScript？优势有哪些？
- 类型安全：编译时发现错误（如拼写错、类型不匹配），减少运行时 bug。
- 更好重构：IDE 支持重命名、跳转、自动补全。
- 团队协作：类型作为“文档”，明确接口契约。
- 生态支持：React/Vue/Angular 官方推荐 TS。
- 大型项目必备：代码规模大时，纯 JS 容易失控。
TypeScript 的基本类型有哪些？
- 原始类型：boolean、number、string、null、undefined、symbol、bigint、void。
- 对象类型：object、array、tuple（元组）、enum（枚举）。
- 特殊类型：any（任意，关闭检查，不推荐）、unknown（未知，安全版 any）、never（永不返回）。
示例：
1
2
3
4
5
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];// 元组

any、unknown、never 的区别？

类型	描述	使用场景	安全性
any	任意类型，关闭类型检查	迁移旧 JS 项目、临时绕过	低（不推荐）
unknown	未知类型，必须先类型收窄	API 返回不确定类型	高（推荐）
never	永不存在的值（如抛错函数）	类型推断的底部类型	-

示例：

let val: unknown ='hello';

if(typeofval ==='string') {// 类型收窄

console.log(val.toUpperCase());

}

中级篇（高频，考察实际编码能力）

interface 和 type 的区别？什么时候用哪个？

特性	interface	type
定义对象	是（主要用途）	是
支持扩展（extends）	是	是（用 & 交叉类型）
支持声明合并	是（同名接口自动合并）	否
可定义联合/元组	否	是
可定义原始类型别名	否	是

推荐：对象/接口用interface（支持合并，便于扩展）；联合、映射、工具类型用type。

示例：

interface User { name: string; }

interface User { age?: number; }// 自动合并

type ID = string | number;

泛型（Generics）是什么？应用场景？
泛型允许创建可复用组件，支持类型参数化。
示例：
1
2
3
4
functionidentity<T>(arg: T): T {
returnarg;
}
let output = identity<string>('hello');// T 推断为 string
场景：数组工具、Promise、React 组件 props、Vue defineProps 等。
联合类型（|）和交叉类型（&）的区别？
- 联合类型：string | number→ 值可以是其中一种。
- 交叉类型：TypeA & TypeB→ 值必须同时满足两种类型（对象合并）。
示例：
1
2
3
type A = { a: string };
type B = { b: number };
type C = A & B;// { a: string; b: number }
类型收窄（Type Narrowing）有哪些方式？
- typeof检查原始类型
- instanceof检查实例
- in检查属性
- 字面量类型守卫（===）
- 自定义类型守卫（is 关键字）
示例：
1
2
3
4
5
6
functionpadLeft(value: string, padding: string | number) {
if(typeofpadding ==='number') {
returnArray(padding + 1).join(' ') + value;// padding 被收窄为 number
}
returnpadding + value;
}

高级篇（大厂深挖，考察类型体操）

TypeScript 的工具类型（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>：联合类型排除/提取
示例：
1
2
type User = { name: string; age: number };
type PartialUser = Partial<User>;// { name?: string; age?: number }
条件类型（Conditional Types）是什么？
T extends U ? X : Y
示例：
1
2
typeIsString<T> = T extends string ?'yes':'no';
typeTest1 = IsString<'hello'>; //'yes'
映射类型（Mapped Types）如何使用？
通过[K in keyof T]遍历键创建新类型。
示例：
1
typeOptional<T> = { [P in keyof T]?: T[P] }; // 等价于 Partial<T>
tsconfig.json 中哪些配置最重要？
- target：编译目标（如 es2020）
- module：模块系统（如 esnext/commonjs）
- strict：开启所有严格检查（强烈推荐）
- noImplicitAny：隐式 any 报错
- strictNullChecks：null/undefined 严格检查
- esModuleInterop：更好导入 commonjs 模块
- skipLibCheck：跳过库类型检查（加速编译）

实战应用题（框架相关高频）

在 React/Vue 项目中如何使用 TypeScript？
- React：用.tsx，定义 props 类型（interface 或 type），useState()。
- Vue：Vue 3 + TS 用<script setup lang="ts">，defineProps()。
如何处理第三方库没有类型定义？
- 用declare module '库名';或安装@types/库名（DefinitelyTyped）。
- 极端：用any断言，但不推荐。