TypeScript 完全指南：类型系统深度解析

🎯 TypeScript 的价值

TypeScript 是 JavaScript 的超集，为其添加了静态类型系统。根据 2023 年 State of JS 调查，TypeScript 的采用率已达到 93%，成为前端开发的标准配置。

📝 基础类型系统

TypeScript 的基础类型系统是构建复杂类型的基石。让我们从底层理解它们。

1. 原始类型

// 原始类型
let name: string = "Alice"
let age: number = 30
let isActive: boolean = true
let nullable: null = null
let undefinedValue: undefined = undefined

// 特殊类型
let anything: any = "可以是任何类型" // ❌ 避免使用
let unknownValue: unknown = "安全版本的 any" // ✅ 推荐
let neverValue: never // 永远不会发生的值
let voidValue: void = undefined // 函数没有返回值

2. 数组与元组

// 数组
let numbers: number[] = [1, 2, 3]
let strings: Array<string> = ["a", "b"] // 泛型语法

// 元组（固定长度和类型的数组）
let person: [string, number] = ["Alice", 30]
let response: [number, string] = [200, "OK"]

// 可选元素
let optionalTuple: [string, number?] = ["Alice"] // ✅

// 剩余元素
let restTuple: [string, ...number[]] = ["Alice", 1, 2, 3]

3. 枚举

// 数字枚举（默认从 0 开始）
enum Direction {
  Up,    // 0
  Down,  // 1
  Left,   // 2
  Right   // 3
}

// 字符串枚举（更推荐）
enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING"
}

// 常量枚举（编译时内联，减少代码体积）
const enum Size {
  Small = 1,
  Medium = 2,
  Large = 3
}

🚀 高级类型特性

TypeScript 的高级类型特性让我们能够构建精确、可复用、类型安全的类型系统。

1. 联合类型与交叉类型

// 联合类型：可以是多种类型之一
let id: string | number
id = "abc"  // ✅
id = 123     // ✅

// 字面量联合类型
type Status = "pending" | "approved" | "rejected"
let status: Status = "pending"

// 可辨别联合（Discriminated Unions）
type Shape = 
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number }
  | { kind: "triangle"; base: number; height: number }

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2
    case "rectangle":
      return shape.width * shape.height
    case "triangle":
      return 0.5 * shape.base * shape.height
  }
}

// 交叉类型：合并多个类型
interface User {
  name: string
  email: string
}

interface Admin {
  permissions: string[]
}

type AdminUser = User & Admin
// AdminUser 必须同时满足 User 和 Admin

const admin: AdminUser = {
  name: "Alice",
  email: "[email protected]",
  permissions: ["read", "write", "delete"]
}

// 合并多个对象类型
type Combine<T, U> = T & U

2. 类型守卫

// typeof 类型守卫
function processValue(value: string | number) {
  if (typeof value === "string") {
    // 此处 value 被收窄为 string
    return value.toUpperCase()
  } else {
    // 此处 value 被收窄为 number
    return value.toFixed(2)
  }
}

// instanceof 类型守卫
class Bird {
  fly() { console.log("Flying...") }
}

class Fish {
  swim() { console.log("Swimming...") }
}

function move(animal: Bird | Fish) {
  if (animal instanceof Bird) {
    animal.fly()
  } else {
    animal.swim()
  }
}

// 自定义类型守卫
function isString(value: unknown): value is string {
  return typeof value === "string"
}

if (isString(someValue)) {
  // someValue 被收窄为 string
  console.log(someValue.toUpperCase())
}

📝 总结

TypeScript 类型系统是现代前端开发的基石。通过本文的学习，你应该掌握了：