TypeScript 高频面试题
1. 什么是 TypeScript它和 JavaScript 有什么区别回答思路TS 是 JS 的超集增加了静态类型系统编译后还是 JS更适合大型项目和多人协作简答模板TypeScript 是 JavaScript 的超集在 JS 基础上增加了静态类型系统。它最大的价值是把很多运行时问题前移到编译阶段发现从而提升可维护性、可读性和重构安全性。和 JavaScript 的区别主要在于JS 是动态类型TS 支持编译期类型检查并且提供了接口、泛型、联合类型等更强的类型表达能力。最终 TS 还是会编译成 JavaScript 运行。2. TypeScript 的核心价值是什么回答思路不是“加类型”这么简单错误前移类型即文档重构安全协作更高效简答模板TypeScript 的核心价值不只是加类型而是通过类型系统把代码中的约束显式化。它能把很多错误提前到编译阶段发现同时增强代码的可读性、IDE 提示和重构能力。在大型项目和多人协作场景下这种价值会特别明显。3.interface和type有什么区别回答思路都能定义对象类型type更灵活interface支持声明合并对象结构偏interface复杂类型运算偏type简答模板interface和type都可以定义类型。interface更适合描述对象结构、类契约并且支持声明合并type更灵活除了对象还能定义联合类型、交叉类型、元组、函数类型等。一般来说定义对象结构我更倾向于用interface涉及类型组合和类型运算我更倾向于用type。4.any、unknown、never有什么区别回答思路any关闭类型检查unknown未知类型使用前必须收窄never不会出现的值常用于穷尽检查简答模板any表示任意类型相当于放弃了 TS 的类型检查unknown也表示未知类型但在使用前必须先做类型判断所以更安全never表示永远不会有值的类型常用于抛错函数、死循环函数以及联合类型的穷尽性检查。5. 什么是泛型有什么使用场景回答思路泛型是参数化类型保持复用同时保留类型信息比any更安全常见于工具函数、请求封装、组件库简答模板泛型可以理解为参数化类型它允许我们在不预先指定具体类型的情况下编写通用代码同时保留类型安全。它的价值在于复用代码的同时不丢失输入和输出之间的类型关系。常见场景包括通用工具函数、接口请求封装、组件库和 Hooks 的类型设计。6. 联合类型和交叉类型的区别是什么回答思路|或且联合表示多种可能交叉表示组合多个类型简答模板联合类型用|表示意思是一个值可以是多个类型中的某一个交叉类型用表示意思是把多个类型合并成一个同时具备这些类型的特征。一个是“或”的关系一个是“且”的关系。7. 什么是类型推导回答思路TS 不一定要求手写所有类型编译器会根据上下文推导例子变量初始化、函数返回值简答模板类型推导是指 TypeScript 可以根据变量初始值、函数返回值或者上下文自动推断类型。所以 TS 并不是要求所有地方都显式写类型它会在很多场景下自动推导既保证安全性也减少冗余代码。8. 什么是类型断言和类型转换有什么区别回答思路类型断言只影响编译器不会改变运行时值真正转换要靠Number/String等简答模板类型断言是告诉 TypeScript 编译器“我比你更清楚这个值的类型”它只影响编译期不会改变运行时的数据。而类型转换是运行时真正把一个值转换成另一种类型比如Number(123)。所以类型断言不是类型转换。9. 什么是类型守卫回答思路运行时判断 编译时收窄常见方式typeof、instanceof、in自定义类型守卫简答模板类型守卫的作用是在运行时通过某种判断方式缩小变量的类型范围让 TypeScript 在对应代码块中知道更具体的类型。常见方式有typeof、instanceof、in也可以写自定义类型守卫函数。它本质上是把运行时判断和编译期类型收窄结合起来。10. TypeScript 是运行时生效还是编译时生效回答思路核心必答题TS 主要是编译时类型检查编译后类型会擦除运行时还是 JS简答模板TypeScript 主要是在编译时生效。它会在开发和编译阶段做类型检查但编译成 JavaScript 后类型信息会被擦除所以运行时并没有这些类型。因此 TS 提供的是编译期安全而不是运行时安全。11. 为什么说 TypeScript 提供的是编译期安全不是运行时安全回答思路类型会被擦除外部数据仍不可信API 返回、用户输入仍需校验简答模板因为 TypeScript 的类型信息只存在于编译阶段编译后的 JavaScript 并不会真的检查类型。所以像接口返回、用户输入、URL 参数这类外部数据TS 无法保证它们运行时一定符合预期仍然需要配合运行时校验。12.keyof是什么回答思路获取对象类型的 key返回联合类型简答模板keyof用来获取一个对象类型的所有键并组成联合类型。比如keyof User可能得到id | name。它常用于泛型约束和工具类型实现。13.typeof在 TypeScript 里有什么作用回答思路不是 JS 运行时typeof在类型层面获取变量类型简答模板在 TypeScript 里typeof可以用来获取一个变量或对象的类型。它通常用于从已有值推导出对应的类型避免重复定义类型结构。14. 什么是extends回答思路接口继承类继承泛型约束条件类型判断简答模板extends在 TypeScript 里有多种用途可以表示类继承类、接口继承接口也常用于泛型约束比如限制泛型必须满足某种结构还可以用于条件类型中表示类型是否满足某个条件。15. 什么是条件类型回答思路类型层面的三元表达式T extends U ? X : Y简答模板条件类型可以理解为类型系统里的三元表达式。它根据一个类型是否满足某个条件返回不同的类型结果。比如T extends string ? true : false。它是很多高级工具类型的基础。16. 什么是映射类型回答思路遍历一个类型的 key重新构造新类型Partial等工具类型基础简答模板映射类型本质上是遍历一个类型的所有 key再根据这些 key 构造出一个新类型。比如把所有属性改成可选、只读等。Partial、Readonly这类工具类型本质上都是映射类型。17. 什么是infer回答思路在条件类型中推断类型常用于提取函数返回值、Promise 值简答模板infer用于条件类型中推断某一部分类型。它可以理解为在类型系统里做“类型提取”。比如ReturnType就是通过infer提取函数的返回值类型。18. 常见工具类型有哪些回答思路PartialRequiredReadonlyPickOmitRecordExcludeExtractReturnType简答模板TypeScript 常见工具类型有Partial全部可选、Required全部必填、Readonly全部只读、Pick挑选字段、Omit排除字段、Record构造键值类型、Exclude、Extract、ReturnType等。这些工具类型大多是基于映射类型、条件类型和infer实现的。19.Partial、Pick、Omit分别是做什么的简答模板PartialT是把T的所有属性变成可选PickT, K是从T中挑选部分属性K组成新类型OmitT, K是从T中排除属性K后得到新类型。它们在实际开发中很常用于表单、接口参数、局部更新场景。20. 什么是声明文件.d.ts回答思路给 JS 提供类型信息只有声明没有实现常用于第三方库补类型简答模板.d.ts是 TypeScript 的声明文件用来描述 JavaScript 模块、全局变量或者第三方库的类型信息。它只包含类型声明不包含具体实现。当一个 JS 库本身没有类型时我们可以通过.d.ts给它补充类型。21.declare关键字有什么作用简答模板declare的作用是告诉 TypeScript这个变量、函数、模块或类在运行时是存在的只是实现不在这里。它只做类型声明不生成实际代码。常用于声明全局变量、外部 JS 库或环境注入对象。22. 什么是结构化类型系统回答思路看结构不看名字鸭子类型和 Java/C# 的名义类型系统对比简答模板TypeScript 使用的是结构化类型系统也叫鸭子类型。它判断两个类型是否兼容主要看结构是否匹配而不是看类型名字是否相同。这和 Java、C# 那种名义类型系统不同。23. TypeScript 为什么适合大型项目回答思路类型约束清晰模块边界明确团队协作好重构安全IDE 支持强简答模板TypeScript 更适合大型项目主要因为它能通过类型系统明确模块边界和接口约束。这样在多人协作时沟通成本更低出错概率更小。同时它也能增强 IDE 提示和重构安全性项目越大收益越明显。24. TypeScript 的缺点是什么回答思路学习成本书写成本小项目收益不明显只提供编译期安全简答模板TypeScript 的缺点主要有几个第一学习成本比 JavaScript 高尤其是泛型、条件类型这些高级特性第二开发初期需要额外编写类型心智负担会更大第三小项目中收益可能不明显第四它只能提供编译期安全运行时仍然需要做校验。25. TypeScript 和 Babel 有什么区别回答思路Babel 偏语法转换TS 除了编译还做类型检查可搭配使用简答模板Babel 主要解决的是语法转换和兼容性问题TypeScript 除了能做语法转换更重要的是提供类型检查。在实际项目里两者经常会结合使用TypeScript 负责类型系统Babel 负责更丰富的编译能力和兼容处理。26. TypeScript 中extends和implements的区别简答模板extends表示继承类可以继承类接口也可以继承接口implements表示类去实现某个接口契约。一个是继承已有能力一个是遵守某个规范。27.enum有什么优缺点回答思路优点表达有限集合缺点会生成运行时代码现代项目常用字面量联合替代简答模板enum的优点是可以清晰表示一组有限状态。但它的缺点是编译后会生成运行时代码增加产物体积而且有时不够轻量。所以在很多现代项目里如果只是表达有限字符串集合往往更倾向于使用联合字面量类型来替代。28. 什么是可辨识联合类型回答思路联合类型 公共区分字段便于 switch 收窄很适合状态建模简答模板可辨识联合类型是指多个类型通过一个公共字段比如type或status来区分。这样在switch或if判断时TypeScript 可以自动收窄到具体类型。它特别适合做请求状态、事件类型、状态机这类业务建模。29. 如何理解“让非法状态无法表达”回答思路高级表达用联合类型精准建模不要一个大对象堆很多可选字段简答模板这是 TypeScript 很重要的设计思想。就是通过更精确的类型建模把业务中不合法的状态组合直接排除掉让错误在类型层面就无法出现。比如请求状态我更倾向于用可辨识联合类型而不是一个对象里同时放loading、data、error这些可能冲突的可选字段。30. 项目里any太多怎么治理回答思路不追求清零先治理核心链路边界用unknownESLint 约束给第三方库补类型简答模板any治理的重点不是完全清零而是控制扩散。我通常会优先治理公共模块、接口层、核心业务链路减少any对系统的污染。对边界数据更倾向于用unknown再配合类型守卫同时通过 ESLint 限制显式any对第三方库缺失类型时优先补声明文件而不是直接放弃类型检查。二、面试官最爱追问的 5 个题建议重点背如果时间有限优先吃透下面这 5 个TypeScript 和 JavaScript 的区别interface和type的区别any、unknown、never的区别泛型的理解和使用场景为什么说 TS 是编译期安全不是运行时安全这 5 个几乎是必问。三、2分钟口语化面试稿如果面试官让你整体讲一讲 TS你可以这样答TypeScript 是 JavaScript 的超集它在 JS 的基础上增加了静态类型系统。我觉得它最大的价值不只是“加类型”而是把很多原本只能在运行时发现的问题提前到编译阶段暴露出来从而提升代码的可维护性、可读性和重构安全性。和 JavaScript 相比最核心的区别是 JS 是动态类型而 TS 支持静态类型检查。同时 TS 提供了更丰富的类型表达能力比如interface、type、泛型、联合类型、交叉类型、条件类型和映射类型等。在实际使用中interface我一般用来描述对象结构和类契约type更适合联合类型和复杂类型运算any表示放弃类型检查unknown更安全使用前必须收窄never常用于穷尽性检查泛型的意义是让代码在复用的同时保留类型关系这在工具函数、请求封装和组件库里很常见。另外 TypeScript 的类型系统主要发生在编译阶段编译后类型会被擦除所以它提供的是编译期安全而不是运行时安全。对接口返回、用户输入这类外部数据仍然需要运行时校验。总体来说我觉得 TypeScript 对中大型项目和多人协作特别有价值因为它能把很多隐式约束变成显式规则。四、面试答题加分句你可以穿插这些句子让回答更“高级”1TypeScript 的核心价值不是加类型而是显式表达约束。2类型本身就是文档而且是不会过期的文档。3泛型的本质不是写一个万能类型而是建立类型之间的约束关系。4TypeScript 提供的是编译期安全不是运行时安全。5我会尽量把any控制在边界而不是让它污染核心业务链路。6我更倾向于用类型建模去消灭一类错误而不是靠运行时 if 判断去兜底。