前端高频面试题：TypeScript 篇

示例：

let val: unknown = 'hello';
if (typeof val === 'string') {
  // 类型收窄
  console.log(val.toUpperCase());
}

中级篇

5. 类型收窄方式

• 联合类型：string | number
• 交叉类型：TypeA & TypeB
• typeof 检查原始类型
• instanceof 检查实例
• in 检查属性
• 字面量类型守卫
• 自定义类型守卫（is 关键字）

示例：

function padLeft(value: string, padding: string | number) {
  if (typeof padding === 'number') {
    return Array(padding + 1).join(' ') + value;
  }
  return padding + value;
}

6. 联合类型和交叉类型的区别

联合类型表示值可以是其中一种，交叉类型表示值必须同时满足两种类型。

示例：

type A = { a: string };
type B = { b: number };
type C = A & B; // { a: string; b: number }

7. 泛型是什么？

泛型允许创建可复用组件，支持类型参数化。

示例：

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>('hello');

8. interface 和 type 的区别

推荐：对象/接口用 interface；联合、映射、工具类型用 type。

高级篇

9. 常用工具类型

• Partial<T>：所有属性可选
• Required<T>：所有属性必选
• Readonly<T>：所有属性只读
• Pick<T, K>：挑选属性
• Omit<T, K>：排除属性
• Record<K, T>：键为 K，值为 T 的对象
• Exclude<T, U> / Extract<T, U>：联合类型排除/提取

示例：

type User = { name: string; age: number };
type PartialUser = Partial<User>;

10. tsconfig.json 重要配置

• target：编译目标
• module：模块系统
• strict：开启所有严格检查
• noImplicitAny：隐式 any 报错
• strictNullChecks：null/undefined 严格检查
• esModuleInterop：导入 commonjs 模块
• skipLibCheck：跳过库类型检查

11. 映射类型与条件类型

映射类型通过 [K in keyof T] 遍历键创建新类型。 条件类型格式：T extends U ? X : Y

示例：

type IsString<T> = T extends string ? 'yes' : 'no';
type Test1 = IsString<'hello'>; // 'yes'

实战应用题

12. 在 React/Vue 项目中如何使用 TypeScript？

• React：用 .tsx，定义 props 类型（interface 或 type），useState()。
• Vue：Vue 3 + TS 用 <script setup lang="ts">，defineProps()。

13. 如何处理第三方库没有类型定义？

• 用 declare module '库名'; 或安装 @types/库名。
• 极端情况可用 any 断言，但不推荐。

面试建议

• 准备一个 TS + React/Vue 的个人项目，说明类型如何提升代码质量。
• 多练类型体操，关注 TS 新特性。