开场白：为什么 TS 面试题总像前女友的脾气？

面试官推了推眼镜："请用 TypeScript 实现一个带类型守卫的防抖函数。"

你心里咯噔一下 —— 这感觉就像考试时翻开试卷发现全是附加题。别慌！今天咱们就把前端面试官的 "杀手锏" 变成你的 "开胃菜"，20 道题带你从 "这啥啊" 到 "就这？"

（配图建议：一个程序员面对电脑屏幕汗流浃背，屏幕上写着 "TS 面试现场"，旁边画个轻松举着代码的超人版自己）

基础篇：别让基础题变成你的 "社死现场"

1. 说说interface和type的区别？

就像外卖平台和便利店：interface是美团（可以不断加新菜品），type是 7-11（一旦上架不能改）。

// interface可以扩展

interface User {

name: string

}

interface User {

age: number

}

// type不能重复定义

type User = {

name: string

}

// ❌ 报错：标识符“User”重复

type User = {

age: number

}

2. 什么是泛型？用一句话形容

泛型就是 "万能保鲜盒"—— 装水果（string）、装蔬菜（number）都可以，但装进去啥样拿出来还得是啥样。

// 没有泛型的尴尬

function getValue(arr: any[], index: number): any {

return arr[index] // 拿出来不知道是啥类型

}

// 有泛型的优雅

function getValue<T>(arr: T[], index: number): T {

return arr[index] // 放进number数组，出来还是number

}

进阶篇：这些题能让你从 "备选" 变 "首选"

3. 如何实现类型守卫？

想象你在酒吧查身份证：类型守卫就是那个 "验卡机"，确保来的真是 18 岁以上的 string 类型。

// 自定义类型守卫

function isString(value: unknown): value is string {

return typeof value === 'string'

}

function printLength(value: unknown) {

if (isString(value)) {

// 这里TypeScript知道value肯定是string

console.log(value.length)

} else {

console.log('不是字符串哦')

}

}

4. 实现一个带超时功能的 Promise 重试机制

就像追女神：第一次失败了？再试几次！但总不能无限试，得设个闹钟。

async function retryWithTimeout<T>(

fn: () => Promise<T>,

retries: number,

timeout: number

): Promise<T> {

try {

// 给Promise加个超时设置

return await Promise.race([

fn(),

new Promise((_, reject) =>

setTimeout(() => reject(new Error('超时了')), timeout)

)

])

} catch (error) {

if (retries > 0) {

return retryWithTimeout(fn, retries - 1, timeout)

}

throw error // 重试次数用完了

}

}

陷阱篇：这些坑 90% 的人都会踩

5. 为什么这个代码会报错？

const user = { name: '张三', age: 20 }

const key = 'name'

console.log(user[key]) // ❌ 报错

因为 TypeScript 怕你乱按键！解决办法是给 key 指定类型：

type UserKey = keyof typeof user // 'name' | 'age'

const key: UserKey = 'name'

console.log(user[key]) // ✅ 没问题

（配图建议：程序员试图用 "密码本"（key）开错了 "抽屉"（对象属性））

终极篇：能答出这些题，薪资可以多要 3k

6. 实现 Partial、Required、Pick 的联合类型

这三个就像衣柜整理术：

• Partial：把所有衣服变成 "可选项"（想穿就穿）

• Required：必须穿全套（一个都不能少）

• Pick：只挑几件喜欢的穿

// 实现Partial

type MyPartial<T> = {

[P in keyof T]?: T[P]

}

// 实现Required

type MyRequired<T> = {

[P in keyof T]-?: T[P]

}

// 实现Pick

type MyPick<T, K extends keyof T> = {

[P in K]: T[P]

}

结尾：面试通关秘籍

记住这三个口诀：

1. 基础题要像背乘法表 —— 滚瓜烂熟

1. 进阶题要像拼乐高 —— 知道零件怎么组合

1. 陷阱题要像避开前女友 —— 时刻保持警惕