2026/5/21 2:04:44
网站建设
项目流程
如何给自己开发的网站加域名,重庆市建设工程信息网官网30系统,名片设计图片,做羞羞的事情网站前端高频面试题#xff1a;TypeScript 篇#xff08;2026 最新版#xff09;
TypeScript#xff08;TS#xff09;已成为现代前端开发的标配#xff0c;尤其在 React、Vue、Angular 等框架中#xff0c;几乎是大厂必考点。2026 年面试趋势#xff1a;更注重类型安全、…前端高频面试题TypeScript 篇2026 最新版TypeScriptTS已成为现代前端开发的标配尤其在 React、Vue、Angular 等框架中几乎是大厂必考点。2026 年面试趋势更注重类型安全、高级类型工具、实际项目应用和tsconfig 配置。以下精选 20 高频题基于最新大厂真题汇总分为基础、中级、高级并附详细解答和代码示例。建议结合项目实战记忆基础篇必背考察理解 TS 核心价值什么是 TypeScript它与 JavaScript 的区别是什么TypeScript 是 JavaScript 的超集superset由 Microsoft 开发最终编译成纯 JS 运行。主要区别TS 支持静态类型检查编译时捕获错误JS 是动态类型运行时错误。TS 有接口、泛型、枚举、装饰器等 OOP 特性。TS 需要编译tscJS 直接运行。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永不返回。示例letisDone:booleanfalse;letnum:number6;letstr:stringhello;letlist:number[][1,2,3];// 或 Arraynumberlettuple:[string,number][hello,10];// 元组any、unknown、never 的区别类型描述使用场景安全性any任意类型关闭类型检查迁移旧 JS 项目、临时绕过低不推荐unknown未知类型必须先类型收窄API 返回不确定类型高推荐never永不存在的值如抛错函数类型推断的底部类型-示例letval:unknownhello;if(typeofvalstring){// 类型收窄console.log(val.toUpperCase());}中级篇高频考察实际编码能力interface 和 type 的区别什么时候用哪个特性interfacetype定义对象是主要用途是支持扩展extends是是用 交叉类型支持声明合并是同名接口自动合并否可定义联合/元组否是可定义原始类型别名否是推荐对象/接口用interface支持合并便于扩展联合、映射、工具类型用type。示例interfaceUser{name:string;}interfaceUser{age?:number;}// 自动合并typeIDstring|number;泛型Generics是什么应用场景泛型允许创建可复用组件支持类型参数化。示例functionidentityT(arg:T):T{returnarg;}letoutputidentitystring(hello);// T 推断为 string场景数组工具、Promise、React 组件 props、Vue defineProps 等。联合类型|和交叉类型的区别联合类型string | number→ 值可以是其中一种。交叉类型TypeA TypeB→ 值必须同时满足两种类型对象合并。示例typeA{a:string};typeB{b:number};typeCAB;// { a: string; b: number }类型收窄Type Narrowing有哪些方式typeof检查原始类型instanceof检查实例in检查属性字面量类型守卫自定义类型守卫is 关键字示例functionpadLeft(value:string,padding:string|number){if(typeofpaddingnumber){returnArray(padding1).join( )value;// padding 被收窄为 number}returnpaddingvalue;}高级篇大厂深挖考察类型体操TypeScript 的工具类型Utility Types有哪些常用PartialT所有属性可选RequiredT所有属性必选ReadonlyT所有属性只读PickT, K挑选属性OmitT, K排除属性RecordK, T键为 K值为 T 的对象ExcludeT, U/ExtractT, U联合类型排除/提取示例typeUser{name:string;age:number};typePartialUserPartialUser;// { name?: string; age?: number }条件类型Conditional Types是什么T extends U ? X : Y示例typeIsStringTTextendsstring?yes:no;typeTest1IsStringhello;// yes映射类型Mapped Types如何使用通过[K in keyof T]遍历键创建新类型。示例typeOptionalT{[PinkeyofT]?:T[P]};// 等价于 PartialTtsconfig.json 中哪些配置最重要target编译目标如 es2020module模块系统如 esnext/commonjsstrict开启所有严格检查强烈推荐noImplicitAny隐式 any 报错strictNullChecksnull/undefined 严格检查esModuleInterop更好导入 commonjs 模块skipLibCheck跳过库类型检查加速编译实战应用题框架相关高频在 React/Vue 项目中如何使用 TypeScriptReact用.tsx定义 props 类型interface 或 typeuseState()。VueVue 3 TS 用script setup langtsdefineProps()。如何处理第三方库没有类型定义用declare module 库名;或安装types/库名DefinitelyTyped。极端用any断言但不推荐。面试建议准备项目准备一个 TS React/Vue 的个人项目面试时能说类型如何提升代码质量。多练类型体操LeetCode TS 版、Type ChallengesGitHub。关注新特性TS 5.x 的 const type parameters、infer 改进等。这些题覆盖了 95% 以上的大厂考察点背熟 理解原理TS 面试稳过如果需要某题的代码演示或扩展解答随时问我