每天一个前端小知识 Day 4 - TypeScript 核心类型系统与实践

TypeScript 核心类型系统与实践

1. 为什么前端面试中越来越重视 TypeScript？

复杂业务场景需要强类型保障稳定性；
更好的 IDE 支持和智能提示；
降低线上 bug 概率；
成熟的工程团队都在使用；
对于 React/Vue 项目维护可读性更强。

2. TypeScript 的核心类型

✅ 原始类型

ts 复制代码

let str: string = 'hello';
let num: number = 123;
let flag: boolean = true;
let u: undefined = undefined;
let n: null = null;

✅ 数组与元组

ts 复制代码

let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['Tom', 25];

✅ 枚举（enum）

ts 复制代码

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

✅ any 与 unknown

ts 复制代码

let a: any = 123; // 可绕过检查（不推荐）
let b: unknown = 'xxx'; // 必须类型断言后使用（推荐）

✅ void 与 never

ts 复制代码

function log(): void {
  console.log('ok');
}

function error(): never {
  throw new Error('err');
}

3. 接口（interface）和类型别名（type）

✅ interface

ts 复制代码

interface Person {
  name: string;
  age?: number; // 可选属性
}

✅ type

ts 复制代码

type Point = {
  x: number;
  y: number;
};

面试常考区别：

interface 可被扩展（继承、合并），type 更灵活（联合、交叉）

推荐优先使用 interface 定义对象结构

4. 类型推断与类型保护

✅ 类型推断

ts 复制代码

let name = 'Tom'; // 推断为 string

✅ 类型保护（Type Guards）

ts 复制代码

function isString(val: unknown): val is string {
  return typeof val === 'string';
}

5. 联合类型与交叉类型

✅ 联合类型

ts 复制代码

let value: string | number;

✅ 交叉类型

ts 复制代码

type Admin = { role: string };
type User = { name: string };
type AdminUser = Admin & User;

6. 泛型（Generics）🌟 面试高频考点

✅ 定义泛型函数

ts 复制代码

function identity<T>(arg: T): T {
  return arg;
}

✅ 泛型接口/类型

ts 复制代码

interface Box<T> {
  value: T;
}

✅ 约束泛型

ts 复制代码

function getLength<T extends { length: number }>(val: T) {
  return val.length;
}

7. 条件类型（高级类型技巧）

ts 复制代码

type IsString<T> = T extends string ? true : false;

常见内置工具类型：

工具类型	作用
`Partial<T>`	将 T 的所有属性变为可选
`Readonly<T>`	所有属性只读
`Pick<T, K>`	选择部分属性
`Omit<T, K>`	排除部分属性
`Record<K, T>`	构造键值对类型
`ReturnType<T>`	提取函数返回类型

8. 实战面试题精讲

📌 Q1：type 和 interface 有什么区别？你如何选择？

答：

type 更灵活，可表达联合类型、元组、映射类型；
interface 更适合对象类型定义，支持声明合并；
实际项目推荐对象结构用 interface，其他用 type。

📌 Q2：如何定义一个支持任意键值的接口？

ts 复制代码

interface AnyObject {
  [key: string]: any;
}

📌 Q3：你是否用过泛型？举个例子？

ts 复制代码

function map<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}

📌 Q4：如何约束泛型必须是数组？

ts 复制代码

function firstElement<T extends any[]>(arr: T): T[0] {
  return arr[0];
}

9. 常见误区 ⚠️

误区	正确做法
认为 `any` 就是万能解决方案	尽量避免 `any`，推荐使用 `unknown` 或具体类型
用 `type` 重复定义对象类型	使用 `interface` 更适合扩展性和结构清晰
忽略了默认 `strict` 模式的重要性	开启 `strict` 模式保障类型安全
不理解 `never` 类型的实际意义	`never` 表示永远不会有返回（抛错/死循环）

✅ 总结

TypeScript 类型系统是前端工程化的根基，尤其在大型项目中提供了强大的类型约束和智能提示。掌握类型定义、泛型、工具类型等核心概念，不仅能写出更稳定的代码，也是中高级前端面试的必答项。