TypeScript 知识总结

目录

1. [TypeScript 基础入门](#TypeScript 基础入门 "#1-typescript-%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8")
2. 核心内置工具类型解析
3. 高级特性
4. [前端面试 TypeScript 重点](#前端面试 TypeScript 重点 "#4-%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-typescript-%E9%87%8D%E7%82%B9")

---

1. TypeScript 基础入门

TypeScript 是 JavaScript 的超集，添加了静态类型系统。掌握它是现代前端开发（尤其是 Angular/Vue 3）的基石。

1.1 为什么要用 TypeScript？

• 类型安全： 在编译阶段发现错误，而不是运行时。
• 更好的代码提示： IDE 可以根据类型提供精准的自动补全。
• 代码可维护性： 接口即文档，让大型项目结构更清晰。

1.2 核心基础概念

接口

定义对象的结构，充当数据的"契约"。

interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}
const u: User = { id: 1, name: "Alice" };

类

面向对象编程的基础，Angular 的组件本质上就是一个类。

class Car {
  brand: string;
  
  constructor(brand: string) {
    this.brand = brand;
  }
  drive() {
    console.log(`${this.brand} is driving`);
  }
}

装饰器

一种特殊的语法，用 @ 符号标记，用于修改类或属性的行为。Angular 大量使用装饰器（如 @Component, @Injectable）。

@Component({
  selector: 'app-root',
  template: 'Hello World'
})
export class AppComponent {}

泛型

将类型参数化，提高代码复用性。

function identity<T>(arg: T): T {
  return arg;
}
// 使用时指定类型
identity<string>("Hello");

访问修饰符

控制类成员的访问权限：

• public: 公开，默认值。
• private: 私有，仅类内部可见。
• protected: 受保护，仅类及其子类可见。

---

2. 核心内置工具类型解析

TypeScript 提供了一系列全局工具类型，用于操作和转换类型。理解它们的源码对于进阶至关重要。

2.1 Partial - 可选化

作用： 将类型 T 的所有属性变为可选。 源码实现：

type Partial<T> = {
  [P in keyof T]?: T[P];
};

• 解析： 遍历 T 的所有属性 P，加上 ? 修饰符。

2.2 Required - 必选化

作用： 将类型 T 的所有属性变为必选（与 Partial 相反）。 源码实现：

type Required<T> = {
    [P in keyof T]-?: T[P];
};

• 解析： 这里的 -? 是核心，意为"移除可选修饰符"。

2.3 Pick - 挑选属性

作用： 从 T 中挑选一组属性 K，构成新类型。 源码实现：

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

• 解析：
  • K extends keyof T: 约束 K 必须是 T 的属性名。
  • [P in K]: 遍历挑选出的属性。

2.4 Record - 构建对象类型

作用： 构建一个对象类型，键名为 K，键值类型为 T。常用于定义字典。 源码实现：

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

• 解析：
  • keyof any: 等价于 string | number | symbol，限制键名类型。
  • 所有属性的值都被统一设为 T。

2.5 Exclude - 排除联合类型成员

作用： 从联合类型 T 中排除 U。 源码实现：

type Exclude<T, U> = T extends U ? never : T;

• 解析： 利用分布式条件类型 。
  • 如果 T 中的成员属于 U，返回 never（在联合类型中会被丢弃）。
  • 如果不属于，保留原类型。

2.6 ReturnType - 获取函数返回值类型

作用： 获取函数 T 的返回值类型。 源码实现：

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

• 解析：
  • infer R: 推断关键字，表示捕获函数返回位置的类型，并赋值给 R。

---

3. 高级特性

3.1 类型断言

手动指定值的类型，绕过编译器的检查。

const input = document.getElementById("input") as HTMLInputElement;

3.2 类型守卫

在运行时确保类型的安全。

if (typeof value === "string") {
  // 这里 TS 知道 value 是 string
  console.log(value.toUpperCase());
}

3.3 联合类型与交叉类型

• A | B: 表示 A 或 B（"或"逻辑）。
• A & B: 表示同时具备 A 和 B 的属性（"且"逻辑）。

---

4. 前端面试 TypeScript 重点

在面试中，除了基础语法，建议重点准备以下内容：

4.1 interface vs type

• Interface: 只能定义对象，支持继承 (extends) 和同名自动合并。
• Type: 更灵活，支持定义联合类型、元组等，不支持合并，但可以使用交叉类型。

4.2 any vs unknown

• any: 任意类型，关闭类型检查（不推荐滥用）。
• unknown: 类型安全的任意类型，使用前必须进行类型收窄。

4.3 readonly vs const

• const: 用于变量，防止变量重新赋值。
• readonly: 用于属性，防止属性被修改（可以配合接口使用）。

4.4 泛型约束

如何限制泛型的范围：

interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // 现在可以放心使用 .length 了
  return arg;
}

4.5 keyof 与 映射类型

• keyof: 获取类型的所有键，返回联合类型。
• 映射类型 ([P in keyof T]): 类似 JS 的 for...in，用于遍历和生成新类型。