TypeScript 高级类型 vs JavaScript：用“杂交水稻”理解类型编程

如果把 JavaScript 比作乐高积木，TypeScript 就是一套智能积木系统。本文将用最生活化的比喻，带你理解 TypeScript 那些看似复杂的高级类型。

一、先看痛点：JavaScript 的“薛定谔类型”

// 场景：用户信息处理
function getUserInfo(user) {
  return {
    name: user.name.toUpperCase(),
    age: user.age + '岁'
  }
}

// 调用时可能出现的灾难：
getUserInfo({ age: 25 }) // 报错：Cannot read 'name' of undefined

JavaScript 的问题：

• 像没有质检员的工厂

• 运行时才发现问题

• 类型关系全靠脑补

二、TypeScript 的四大法宝

1. 联合类型 vs JS 的"或"逻辑

比喻：多合一螺丝刀

// TS 写法
type ID = string | number

function printId(id: ID) {
  console.log(id)
}

// 等效 JS 逻辑
function printIdJS(id) {
  if (typeof id !== 'string' && typeof id !== 'number') {
    throw new Error('类型错误')
  }
  console.log(id)
}

2. 交叉类型 vs JS 的 Object.assign

比喻：杂交水稻

// TS 写法
type Employee = Person & WorkCard

// 等效 JS 实现
const employee = Object.assign({}, person, workCard)

实际应用场景：

type WiFi = { ssid: string; password: string }
type Bluetooth = { deviceId: string }

type SmartDevice = WiFi & Bluetooth

// 正确示例
const speaker: SmartDevice = {
  ssid: 'Home',
  password: '123456',
  deviceId: 'X1'
}

// 错误示例（缺少属性立即报错）
const errorDevice: SmartDevice = {
  ssid: 'Office' // 缺少 password 和 deviceId
}

3. 泛型 vs JS 的函数参数

比喻：万能模具

// TS 的泛型队列
class Queue<T> {
  private data: T[] = []
  push(item: T) { /*...*/ }
  pop(): T | undefined { /*...*/ }
}

// 等效 JS 实现（无类型保护）
class QueueJS {
  constructor() {
    this.data = []
  }
  push(item) { /*...*/ }
  pop() { /*...*/ }
}

使用对比：

// TS 有类型约束
const numberQueue = new Queue<number>()
numberQueue.push(1)       // ✅
numberQueue.push('hello') // ❌ 立即报错

// JS 要到运行时才会发现问题
const jsQueue = new QueueJS()
jsQueue.push(1)
jsQueue.push('hello') // 不会报错
const value = jsQueue.pop()
value.toFixed(2)      // 运行时可能报错

4. 条件类型 vs JS 的三元表达式

比喻：智能分流器

// TS 类型判断
type IsNumber<T> = T extends number ? 'Yes' : 'No'

// 等效 JS 逻辑
function isNumberJS(value) {
  return typeof value === 'number' ? 'Yes' : 'No'
}

实战应用：

// 自动过滤非对象类型
type FilterObject<T> = T extends object ? T : never

type Test1 = FilterObject<string>       // never
type Test2 = FilterObject<{ a: 1 }>     // { a: 1 }
type Test3 = FilterObject<string[] >    // string[]

三、TypeScript 的“超能力”类型

1. 模板字面量类型

像字符串模板的升级版

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
type ApiPath = `/api/${string}`

// 正确使用
const url1: ApiPath = '/api/users'  // ✅
const url2: ApiPath = '/users'      // ❌

2. 映射类型

批量处理对象属性

// 把对象所有属性变为可选
type Optional<T> = {
  [K in keyof T]?: T[K]
}

// 使用示例
type User = {
  name: string
  age: number
}

type OptionalUser = Optional<User>
/* 等效于：
{
  name?: string
  age?: number
}
*/

四、为什么需要类型体操？

1. 智能提示加强：编辑器能准确推断类型

2. 代码即文档：类型声明本身就是最好的注释

3. 错误前置：把运行时错误消灭在编码阶段

4. 重构信心：大规模修改代码不心慌

五、学习建议

1. 从interface和type开始打基础

2. 多用 VS Code 的类型推导提示

3. 渐进式学习路线：

   复制

   基础类型 → 联合类型 → 泛型 → 条件类型 → 类型体操

4. 官方文档是最好的参考资料：TypeScript Handbook

最后思考：TypeScript 的类型系统就像给你的代码装上了CT 扫描仪，在开发阶段就能发现深层问题。虽然初期需要学习成本，但它能让你写出更健壮的代码，特别适合大型项目协作开发。

升级挑战：尝试用 TS 类型实现一个安全的 localStorage 封装器，要求：

• 支持自动序列化/反序列化

• 有类型约束的 key 管理

• 过期时间控制