【前端高频面试题】 - 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

NestJS 核心揭秘:InstanceWrapper 的艺术与前端缓存新思路

NestJS 核心揭秘:InstanceWrapper 的艺术与前端缓存新思路

文章目录 * 概述 * 第一部分:深入幕后——NestJS 的“实例管家” InstanceWrapper * 一、核心职责:不止于封装 * 二、关键属性解构(增强版) * 三、一个实例的生命旅程 * 第二部分:灵感跨界——构建前端页面的“InstanceWrapper”缓存层 * 一、设计哲学:前端数据包装器 * 二、定义我们的“前端 InstanceWrapper” * 三、实现缓存管理器与 React Hook * 四、使用场景示例 * 总结 。 概述 在 NestJS 构建的精密后端世界里,依赖注入(DI)是其生命线。而在这条生命线的核心,有一个默默无闻却至关重要的角色——InstanceWrapper。它不仅是 NestJS 容器中的“实例管家”,更是整个框架实现高效、

我用Claude Code + GLM4.7修前端Bug的翻车现场,1小时烧光5小时限额

本来想体验一把“vibe coding 省时间”,结果变成“vibe coding 省不了、还很贵”:折腾将近一小时,GLM 额度直接打满,Bug 还在。 背景:事情是怎么开始的 最近遇到一个前端 Bug,属于那种看起来不大、但很烦的类型:页面运行时报错,提示动态导入某个模块失败(报错里能看到类似 Failed to fetch dynamically imported module .../router/index.ts 这种信息)。 我想着正好试试工具链:Claude Code + GLM4.7。理想情况是:它读代码、跑命令、给修改方案,我负责点确认就行。 现实是另一回事。 结果:时间花了,额度没了,Bug 还没修好 简单总结一下这次的“

WebGIS视角下基孔肯雅热流行风险地区分类实战解析

WebGIS视角下基孔肯雅热流行风险地区分类实战解析

目录 前言 一、关于基孔肯雅热 1、病原学特征 2、流行病学特征 3、疫情处置 4、预防措施 二、流行风险地区空间可视化 1、流行风险地区分类标准 2、空间查询基础 3、Leaflet空间可视化 三、流行风险地区WebGIS展示 1、Ⅰ类地区 2、Ⅱ类地区 3、Ⅲ类地区 4、Ⅳ类地区 四、总结 前言         在全球化与城市化进程不断加速的当下,传染病的传播范围与速度呈现出前所未有的态势,给公共卫生安全带来了严峻挑战。基孔肯雅热作为一种由基孔肯雅病毒引起的急性传染病,近年来在多个地区引发疫情,其传播速度快、感染范围广,且易与其他蚊媒传染病叠加流行,严重威胁着人类健康和社会稳定。准确划分基孔肯雅热流行风险地区,对于制定科学合理的防控策略、优化医疗资源配置以及提高公众防范意识具有至关重要的意义。         本研究旨在通过系统梳理 WebGIS 技术在传染病流行风险评估中的应用现状与优势,结合基孔肯雅热的流行特点和防控需求,构建一套基于

vue-router(vue 路由)基本使用指南(二)

vue-router(vue 路由)基本使用指南(二)

文章目录 * 深入使用 * 导航守卫 * 重定向与别名 * history 配置:指定历史模式 * 路由元信息(meta) * 拓展 * 状态管理(Pinia / Vuex) * Pinia / Vuex 介绍 * Vuex vs Pinia * Pinia 基本使用 * Pinia 使用 Cookies 存储 深入使用 导航守卫 导航守卫用于在路由跳转前、跳转后或解析过程中,添加自定义的逻辑处理,例如权限验证。 * to 和 from 是即将进入的目标路由和当前导航正要离开的路由 * next 是一个函数,该函数用于控制路由的跳转。 * next():继续执行路由。 * next(false):中断当前路由,如果浏览器的 URL 改变了,那么 URL 会回到 from