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

【完整源码+数据集+部署教程】美食图像分割系统源码&数据集分享 [yolov8-seg-FocalModulation&yolov8-seg-GFPN等50+全套改进创新点发刊_一键训练教程_Web

【完整源码+数据集+部署教程】美食图像分割系统源码&数据集分享 [yolov8-seg-FocalModulation&yolov8-seg-GFPN等50+全套改进创新点发刊_一键训练教程_Web

背景意义 随着信息技术的迅猛发展,计算机视觉领域的研究逐渐深入,尤其是在图像分割和物体检测方面的应用越来越广泛。美食图像分割作为计算机视觉中的一个重要研究方向,不仅在餐饮行业、食品安全监测、营养分析等领域具有重要的实际应用价值,还为美食文化的传播和推广提供了新的技术手段。YOLO(You Only Look Once)系列模型以其高效的实时检测能力和较高的准确性,成为了图像分割领域的热门选择。特别是YOLOv8的推出,进一步提升了模型在复杂场景下的表现,使其在美食图像分割任务中展现出更为优越的性能。 本研究旨在基于改进的YOLOv8模型,构建一个高效的美食图像分割系统。我们使用的数据集包含3800张图像,涵盖136种不同类别的美食,包括各类主菜、配菜、调料等。这一丰富的类别设置为模型的训练和测试提供了良好的基础,能够有效提升模型对不同美食的识别能力。通过对美食图像的精确分割,不仅可以实现对美食的自动识别,还能够为后续的营养分析、热量计算和个性化推荐等应用提供数据支持。 在当今社会,健康饮食和营养均衡已成为人们日益关注的话题。通过美食图像分割技术,可以帮助用户更好地了解所摄取食物的

爬虫对抗:ZLibrary反爬机制实战分析——前端混淆、请求签名与频率限制的逆向工程与绕过思路

摘要 ZLibrary作为全球最大的数字图书馆之一,其反爬虫机制的演进堪称现代Web防御技术的缩影。从早期的简单IP封禁,到如今融合网络层限速、应用层指纹识别、前端JS混淆、动态签名校验、行为分析及混合验证码的多维防御体系,ZLibrary构建了一套全链路的反爬闭环。本文基于实战抓包(Charles/Wireshark)、浏览器调试(Chrome DevTools)及代码逆向(Frida/AST还原)等技术手段,对ZLibrary的反爬机制进行深度拆解。核心聚焦三大技术难点:IP频率限制的分层阈值与画像机制、前端JS混淆下的动态令牌生成逻辑(token/sign)、以及请求签名与TLS指纹的协同校验。文章不仅揭示各机制的底层技术原理,更输出一套可工程化复用的绕过思路,包括代理池的精细调度、浏览器指纹的模拟、无头浏览器的优化及验证码的降级预防策略。全文约2万字,旨在为爬虫技术与Web安全研究者提供深度的实战参考。 关键词: ZLibrary;反爬虫;JS混淆;请求签名;频率限制;指纹识别;验证码;逆向工程 第一章 技术背景与研究目标 1.1 爬虫与反爬虫的“军备竞赛”现状

基于Java和高德开放平台的WebAPI集成实践-以搜索POI2.0为例

基于Java和高德开放平台的WebAPI集成实践-以搜索POI2.0为例

目录 前言 一、高德搜索API简介 1、高德开放平台 2、搜索功能介绍  3、部分API介绍 二、Uniapi集成高德API 1、API集成流程 2、访问接口的定义 3、业务调用集成 三、常见问题与优化 四、总结 前言         在当今数字化时代,地理信息系统(GIS)和位置服务(LBS)已成为许多应用程序的核心组成部分。无论是导航、物流、社交网络还是电子商务,位置数据的获取和处理都显得尤为重要。高德开放平台作为国内领先的地理信息服务提供商,提供了丰富的WebAPI接口,帮助开发者快速集成地图、导航、搜索等功能。其中,POI(Point of Interest)搜索是许多应用场景中的关键功能,它能够帮助用户快速找到附近的兴趣点,如餐馆、酒店、加油站等。         Java作为一种广泛使用的编程语言,因其跨平台性、

前端组件库:别再重复造轮子了

前端组件库:别再重复造轮子了 毒舌时刻 这组件写得跟拼凑似的,一点都不统一。 各位前端同行,咱们今天聊聊前端组件库。别告诉我你还在手动编写所有组件,那感觉就像在没有工具的情况下盖房子——能盖,但效率低得可怜。 为什么你需要组件库 最近看到一个项目,每个组件都要手动编写,样式不统一,维护困难。我就想问:你是在做组件还是在做重复劳动? 反面教材 // 反面教材:手动编写组件 // Button.jsx import React from 'react'; function Button({ children, onClick }) { return ( <button onClick={onClick} style={{ padding: '10px 20px', backgroundColor: '#007bff', color: '