TypeScript 面试题及详细答案（职场实战版）

TypeScript面试题及详细答案（职场实战版）本次面试题适配前端初中级岗位，涵盖TS基础语法、核心类型、接口与泛型、高级特性、工程实践、易错点等高频考点，题型包含选择题、简答题、代码手写题，答案贴合实际项目开发场景，通俗易懂、无书面化套话。一、基础选择题（高频基础考点）1.以下不属于TypeScript基础原始类型的是？（）A.stringB.numberC.nullD.object答案：D解析：TS原始基础类型包含string、number、boolean、null、undefined、symbol、bigint。object是引用类型，不属于原始类型，日常开发中常用来描述对象、数组、函数等引用数据。2.关于TS任意类型any的说法，错误的是？（）A.关闭该变量的类型校验B.可以赋值为任意类型的值C.严格模式下依然可以随意使用D.推荐项目中大量使用答案：D解析：any会丧失TS类型校验的优势，无法做类型推导和语法检查，容易埋下线上bug，项目中尽量少用，仅用于兼容老旧JS代码、第三方无类型声明的插件。3.TS中readonly关键字的作用是？（）A.变量只能读取，不能修改B.变量必须初始化，不可为空C.限制参数类型不可变D.让数组长度不可变答案：A解析：readonly用于修饰接口、类的属性，声明后属性仅支持读取，无法二次赋值修改。需要注意：readonly修饰数组仅限制数组元素不能修改，不能限制数组整体重新赋值。二、核心简答题（面试高频问答）1.说说TypeScript和JavaScript的核心区别？参考答案：1.类型机制不同：JS是动态弱类型语言，变量类型在运行时确定，编译阶段无校验；TS是静态强类型语言，支持静态类型校验，变量类型在编码阶段就确定，编译阶段就能拦截类型错误。2.语法特性不同：TS在JS基础上扩展了接口、泛型、枚举、命名空间、装饰器、类型断言等高级语法，适配大型项目开发。3.编译机制不同：JS可直接在浏览器、Node环境运行；TS无法直接运行，必须编译为JS代码后才能执行。4.工程能力不同：TS支持模块化类型约束、全局类型定义、文件类型检查，适合多人协作的大型项目；JS无强制类型约束，项目庞大后极易出现类型混乱、隐性bug。2.说说interface和type类型别名的区别？参考答案：两者大部分场景可以通用，都用于定义对象、函数结构，核心区别集中在扩展性和使用场景：1.扩展性差异：interface支持重复声明合并，多次声明同一个接口会自动合并属性；type不支持重复声明，同一名称只能定义一次。2.继承方式不同：interface通过extends实现继承，可多继承；type通过交叉类型&实现属性合并。3.适用范围不同：interface仅能定义对象、函数、类的结构；type可以定义任意类型，包括基础类型、联合类型、元组、交叉类型等。4.场景规范：日常开发中，定义对象结构、组件props、接口返回值优先用interface；定义联合类型、工具类型、复杂组合类型优先用type。3.什么是TS泛型？泛型的作用是什么？参考答案：泛型是一种类型参数复用机制，简单说就是给类型设置“参数”，让组件、函数、接口可以适配多种类型，不用重复定义相似代码。核心作用：1.解决类型复用问题，避免写大量重复的类型代码；2.保留类型推导，不丢失类型校验，比any更安全；3.适配通用工具函数、封装公共组件、统一接口返回值结构，提升代码通用性和规范性。举例：封装一个通用的数组转对象函数，通过泛型适配任意数组项类型，无需为每个类型单独写方法。4.说说TS联合类型、交叉类型的区别和使用场景？参考答案：1.联合类型（|）：表示取值为多个类型中的任意一种，满足其一即可。示例：typeStatus='success'|'error'|'loading'场景：接口状态、按钮类型、固定枚举值等有限的可选类型。2.交叉类型（&）：表示合并多个类型，必须同时满足所有类型属性。示例：typeUserInfo=User&{token:string}场景：拓展原有对象类型、合并多个接口属性、拼接复杂数据结构。5.TS中的类型断言是什么？有哪些用法？参考答案：类型断言是开发者手动告诉编译器变量的真实类型，覆盖编译器的自动推导，不会改变代码运行结果，仅作用于编译阶段。两种用法：1.尖括号写法：<string>value（JSX环境不支持）2.as写法：valueasstring（通用写法，兼容JSX，项目首选）使用场景：后端返回数据类型不明确、DOM元素获取类型推导不准确、动态变量类型矫正。注意：禁止滥用类型断言，会丢失TS类型校验的意义，仅在确定数据类型无误时使用。6.说说TS枚举的特点和实际开发场景？参考答案：枚举是TS专属的类型，用于定义固定的一组常量集合，分为数字枚举、字符串枚举、异构枚举（极少用）。核心特点：1.数字枚举默认从0开始自增，支持反向映射（值映射键、键映射值）；2.字符串枚举无反向映射，值必须手动赋值；3.枚举代码编译后会生成真实JS对象，不是纯类型（interface/type编译后会消失）。开发场景：接口状态码、订单状态、用户权限、性别、按钮状态等固定不变的常量。7.什么是TS类型守卫？作用是什么？参考答案：类型守卫是通过条件判断，精准缩小变量类型范围的语法，让编译器在分支中精准识别变量类型，解决联合类型判断时报错的问题。常用类型守卫：typeof、instanceof、in、自定义类型守卫函数。作用：规避联合类型属性访问报错，精准做类型收缩，让代码类型校验更严谨，避免运行时属性不存在的错误。三、手写代码题（面试必考实操）1.手写泛型通用数组去重函数参考答案：typescript

//通用数组去重，支持任意基础类型数组

functionuniqueArray<Textendsstring|number|boolean>(arr:T[]):T[]{

return[...newSet(arr)]

}

//使用示例

constnumArr=uniqueArray([1,2,2,3,3,4])

conststrArr=uniqueArray(['a','b','a','c'])思路解析：通过泛型约束数组元素类型，限制为可去重的基础类型，适配多场景数组去重，保留类型推导，返回值类型与入参一致。2.定义用户信息接口，包含必填、可选、只读属性参考答案：typescript

interfaceUser{

//必填属性

id:number

username:string

//可选属性

age?:number

//只读属性，初始化后不可修改

readonlycreateTime:string

//枚举类型属性

status:0|1//0-禁用1-正常

}

//使用示例

constuser:User={

id:1,

username:'张三',

createTime:'2026-01-01',

status:1

}3.手写自定义类型守卫，判断变量是否为对象参考答案：typescript

functionisObject(val:unknown):valisRecord<string,any>{

returntypeofval==='object'&&val!==null&&!Array.isArray(val)

}

//使用示例

constdata:unknown={name:'李四'}

if(isObject(data)){

//编译器可精准识别data为对象类型，不会报错

console.log()

}四、工程实战高频问题1.tsconfig.json中strict严格模式的作用？开启后有哪些影响？参考答案：strict是TS核心配置，开启后会一次性启用所有严格类型校验规则，是项目规范的基础配置。开启后核心约束：1.开启noImplicitAny：禁止变量、参数隐式any类型，必须显式定义类型；2.开启strictNullChecks：严格校验空值，变量默认不允许为null/undefined，必须显式声明；3.开启strictFunctionTypes：严格校验函数参数、返回值类型；4.开启strictPropertyInitialization：类属性必须初始化，禁止未定义直接使用。实际项目中必须开启严格模式，能最大程度规避隐性类型bug，统一团队编码规范。2.如何解决TS引入第三方模块报错“找不到模块”？参考答案：该问题核心原因是第三方库没有TS类型声明文件（.d.ts），解决方案按优先级排序：1.安装官方类型包：大部分无原生类型的库，可安装@types/xxx类型声明包；2.自定义类型声明：在项目src目录新建typings.d.ts文件，手动声明模块：declaremodule'xxx'；3.临时规避（不推荐）：在tsconfig关闭模块校验，或使用//@ts-ignore注释忽略报错；4.升级库版本：部分旧版本库无类型支持，升级新版本可自带类型声明。3.说说TS工具类型Partial、Required、Readonly、Pick、Omit的用法参考答案：均为TS内置通用工具类型，用于快速改造已有类型，提升开发效率：1.Partial<T>：将T所有属性变为可选属性；常用于表单编辑、参数部分修改场景2.Required<T>：将T所有属性变为必填属性；适配批量校验参数场景3.Readonly<T>：将T所有属性变为只读属性；用于常量数据、配置信息4.Pick<T,K>：从T中挑选指定属性K，生成新类型；按需提取字段5.Omit<T,K>：从T中剔除指定属性K，生成新类型；过滤多余字段示例：typeUserPick=Pick<User,'id'|'username'>五、易错点面试题（避雷专项）1.null和undefined在TS中的区别？参考答案：1.含义不同：undefined表示变量未定义、未赋值；null表示变量已定义，值为空；2.严格模式下，两者是独立类型，不互通；非严格模式下可互相赋值；3.业务场景：接口返回空数据用