【前端高频面试题】 - TypeScript 篇

【前端高频面试题】—— TypeScript 篇(2025-2026 最新趋势版)

以下是目前大厂和中高级前端岗位最常问的 TypeScript 面试题,按出现频率和难度从高到低排序,涵盖基础、进阶、工程化、类型体操等多个维度。

基础 & 核心概念(几乎必问)

  1. TypeScript 和 JavaScript 的主要区别是什么?TypeScript 的优势和劣势分别有哪些?
  2. type 和 interface 有什么区别?什么场景下应该用哪个?
  3. 什么是类型推断(Type Inference)?举几个常见的类型推断场景。
  4. const 和 readonly 的区别?什么时候用 readonly?
  5. 什么是类型兼容性(Type Compatibility)?结构类型系统和标称类型系统有什么区别?
  6. any、unknown、never 三者的区别和使用场景分别是什么?
  7. 泛型(Generics)是什么?为什么需要泛型?写出几个常见的泛型工具类型的使用场景。

中级 & 常用高级类型(非常高频)

  1. extends 在 TypeScript 中有几种含义?分别是什么?
  2. 条件类型(Conditional Types)是什么?infer 关键字怎么用?
  3. 分布式条件类型(Distributive Conditional Types)是什么?什么时候会触发分布式?
  4. keyof、typeof、in、as const 这几个关键字分别在什么场景下使用?
  5. 请手写以下几个高频工具类型(至少说出思路)
    • Partial
    • Required
    • Pick<T, K>
    • Omit<T, K>
    • Exclude<T, U>
    • Extract<T, U>
    • NonNullable
    • ReturnType
    • Parameters
    • ConstructorParameters
    • InstanceType
  6. 如何实现一个深度 Partial(DeepPartial)?

进阶 & 类型体操(中高级必考)

  1. 如何约束泛型参数必须是某个类型的 key?(keyof)
  2. 如何写一个类型,让它接收一个对象类型,返回这个对象所有值的联合类型?
  3. 如何实现一个类型 Get<T, K>,可以支持多级路径(如 Get<User, ‘address.street’>)?
  4. 什么是映射类型(Mapped Types)?如何利用映射类型实现一个类型反转(key 和 value 互换)?
  5. 如何实现一个类型 IsEqual<T, U>,判断两个类型是否完全相等?(考虑分布式)
  6. 如何写一个类型,让它把一个联合类型转成交叉类型?(Union to Intersection)
  7. 模板字面量类型(Template Literal Types)在 4.1+ 版本有什么典型应用场景?

工程 & 实际应用(大厂偏爱)

  1. 在项目中如何更好地使用 TypeScript?(最佳实践角度)
  2. @ts-ignore、@ts-expect-error、@ts-nocheck、@ts-check 分别是什么意思?使用场景和优先级?
  3. declare 关键字有什么作用?什么时候需要用 declare?
  4. 如何给第三方没有类型定义的库写类型声明文件(.d.ts)?
  5. 如何处理 React 中常见的类型问题?
    • FC vs FunctionComponent
    • PropsWithChildren
    • useRef 的泛型
    • forwardRef + useImperativeHandle 的类型
    • event 类型(React.MouseEvent、React.ChangeEvent 等)
  6. TypeScript 如何实现函数重载(Function Overloading)?
  7. const enum 和普通 enum 的区别?tree-shaking 的时候有什么影响?
  8. satisfies 操作符(4.9+)有什么用?举例说明。

类型体操 & 难题(资深/难题)

  1. 实现一个类型 Flatten,把多维数组展平为一维
  2. 实现一个类型 Mutable,把所有 readonly 属性变成可变
  3. 实现一个类型 DeepReadonly,深度 readonly
  4. 实现一个类型 Diff<T, U>,找出 T 中不在 U 中的属性
  5. 实现一个类型 PromiseAll 的类型定义(类似 Promise.all 的类型)
  6. 实现一个类型 Last,获取元组最后一个元素类型
  7. 实现一个类型 TupleToObject,把元组转成对象类型(key 和 value 相同)

总结:面试准备建议(2025-2026 版)

如果你正在准备面试,可以告诉我你现在的水平(初级/中级/高级)或者你最想深入的几个题,我可以:

  • 给你详细答案 + 代码示例
  • 帮你模拟面试追问
  • 提供更难的体操题

你想先看哪几道题的详细解析?或者直接来一套模拟面试?

Read more

Lottie-Web 完整技术指南:让动画开发更简单高效

📚 目录 * 一、什么是 Lottie-Web * 二、为什么选择 Lottie-Web * 三、安装与引入 * 四、基础使用 * 五、API 详解 * 六、Vue 集成实战 * 七、高级特性 * 八、性能优化 * 九、常见问题与解决方案 * 十、最佳实践 * 十一、实际应用场景 * 十二、总结 一、什么是 Lottie-Web 1.1 Lottie 简介 Lottie 是 Airbnb 开源的一个动画库,它可以将 After Effects 动画导出为 JSON 格式,然后在 Web、iOS、Android

Java Web 开发:JSON 基础 + @Test 测试 + Cookie/Session/ 请求处理

Java Web 开发:JSON 基础 + @Test 测试 + Cookie/Session/ 请求处理

个人主页:♡喜欢做梦 欢迎  👍点赞  ➕关注  ❤️收藏  💬评论 目录 编辑 🍍JSON的概念  🍐概念  🍐@Test注解 🍑什么是@Test? 🍑与JSON关联 🍑@Test标记的方法与main方法的区别  🍍JSON语法  🍐核心数据类型  🍐常见使用 🍑对象 🍑数组  🍑JSON字符串和Java对象的互转 🍑传递JSON 🍑获取URL中的参数 🍑上传文件:@RequestPart  🍍Cookie和Seeion  🍐Cookie 🍑什么是Cookie? 🍑Cookie的获取  🍐Session 🍑什么是Session?  🍐Cookie和Session之间的关系 🍑Session的存储 🍑Session的获取 🍍获取header 🍍JSON的概念  🍐概念 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。他基于JavaScript的一个子集,但采用了独立语言的文

《C++ Web 自动化测试实战:常用函数全解析与场景化应用指南》

《C++ Web 自动化测试实战:常用函数全解析与场景化应用指南》

🔥草莓熊Lotso:个人主页 ❄️个人专栏: 《C++知识分享》《Linux 入门到实践:零基础也能懂》 ✨生活是默默的坚持,毅力是永久的享受! 🎬 博主简介: 文章目录 * 前言: * 一. 元素定位:自动化测试的 “精准导航” * 1.1 cssSelector:简洁高效的选择器 * 1.2 xpath:灵活强大的路径语言 * 二. 测试对象操作:定位后的 “核心动作” * 2.1 点击与提交:触发页面交互 * 2.2 文本输入与清除:模拟用户输入 * 2.3 文本与属性获取:验证测试结果 * 三. 窗口与弹窗控制:解决 “多窗口与弹窗干扰” * 3.1 窗口控制:句柄是关键 * 3.

C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战

C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战

🔥草莓熊Lotso:个人主页 ❄️个人专栏: 《C++知识分享》《Linux 入门到实践:零基础也能懂》 ✨生活是默默的坚持,毅力是永久的享受! 🎬 博主简介: 文章目录 * 前言: * 一. 自动化测试基础:先搞懂"为什么"和"做什么" * 1.1 自动化测试的核心目标:回归测试 * 1.2 自动化测试分类:别把 “不同自动化” 混为一谈 * 1.3 自动化测试金字塔:如何分配测试资源? * 二. Web 自动化测试核心:环境搭建与驱动管理 * 2.1 核心组件原理:三者如何协同工作? * 2.2 环境搭建:3 步搞定依赖安装