前端高频面试题：TypeScript 篇

TypeScript 的基本类型有哪些？

示例：

let isDone: boolean = false;
let num: number = 6;
let str: string = 'hello';
let list: number[] = [1, 2, 3]; // 或 Array<number>
let tuple: [string, number] = ['hello', 10]; // 元组

中级篇（高频，考察实际编码能力）

• 联合类型：string | number → 值可以是其中一种。
• 交叉类型：TypeA & TypeB → 值必须同时满足两种类型（对象合并）。
• typeof 检查原始类型
• instanceof 检查实例
• in 检查属性
• 字面量类型守卫（===）
• 自定义类型守卫（is 关键字）

类型收窄（Type Narrowing）有哪些方式？

示例：

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

联合类型（|）和交叉类型（&）的区别？

示例：

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

泛型（Generics）是什么？应用场景？

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

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

场景：数组工具、Promise、React 组件 props、Vue defineProps 等。

interface 和 type 的区别？什么时候用哪个？

推荐：对象/接口用 interface（支持合并，便于扩展）；联合、映射、工具类型用 type。 示例：

interface User {
  name: string;
}
interface User {
  age?: number;
} // 自动合并

type ID = string | number;

高级篇（大厂深挖，考察类型体操）

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

tsconfig.json 中哪些配置最重要？

• target：编译目标（如 es2020）
• module：模块系统（如 esnext/commonjs）
• strict：开启所有严格检查（强烈推荐）
• noImplicitAny：隐式 any 报错
• strictNullChecks：null/undefined 严格检查
• esModuleInterop：更好导入 commonjs 模块
• skipLibCheck：跳过库类型检查（加速编译）

映射类型（Mapped Types）如何使用？

通过 [K in keyof T] 遍历键创建新类型。 示例：

type Optional<T> = {
  [P in keyof T]?: T[P]
}; // 等价于 Partial<T>

条件类型（Conditional Types）是什么？

T extends U ? X : Y 示例：

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

TypeScript 的工具类型（Utility Types）有哪些常用？

示例：

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

实战应用题（框架相关高频）

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

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

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

• 用 declare module '库名'; 或安装 @types/库名（DefinitelyTyped）。
• 极端：用 any 断言，但不推荐。