当前位置: 首页 > article >正文

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)
}
特性TypeScriptJavaScript 实现
代码量1 行类型声明4 行类型检查逻辑
错误发现写代码时立即提示运行时才可能发现
可读性直观的类型关系隐藏在代码逻辑中的判断

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. interfacetype开始打基础

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

  3. 渐进式学习路线:

    复制

    基础类型 → 联合类型 → 泛型 → 条件类型 → 类型体操
  4. 官方文档是最好的参考资料:TypeScript Handbook


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

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

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

  • 有类型约束的 key 管理

  • 过期时间控制


http://www.kler.cn/a/585790.html

相关文章:

  • 【redis】set 类型:基本命令
  • 遥感数据获取、处理、分析到模型搭建全流程学习!DeepSeek、Python、OpenCV驱动空天地遥感数据分析
  • WPF程序使用AutoUpdate实现自动更新
  • Secs/Gem第一讲(基于secs4net项目的ChatGpt介绍)
  • 完善机器人:让 DeepSeek 使用Vue Element UI快速搭建 AI 交互页面
  • 【Linux系统编程】管道
  • 什么是mysql索引回表?
  • 杨辉三角形(信息学奥赛一本通-2043)
  • 智慧应急消防解决方案(35页PPT)(文末有下载方式)
  • doris:SQL 方言兼容
  • 【0x80070666】-已安装另一个版本...(Tableau 安装失败)
  • 裸机开发-GPIO外设
  • Android的第一次面试(Java篇)
  • 为什么 JPA 可以通过 findByNameContaining 自动生成 SQL 语句?
  • 如何在PHP中实现数据加密与解密:保护敏感信息
  • 小语言模型(SLM)技术解析:如何在有限资源下实现高效AI推理
  • 《CircleCI:CircleCI:解锁软件开发持续集成(CI)和持续部署(CD)高效密码》:此文为AI自动生成
  • Windows 上安装配置 Maven
  • WVP前后端部署
  • Java 大视界 -- Java 大数据分布式计算中的资源调度与优化策略(131)