TypeScript 5.9 与类型安全基础
在 JavaScript 基础上增加静态类型检查,提前发现字段、参数和状态使用错误。
先用白话理解
它到底是什么?
TypeScript 可以理解为“带类型提示和检查的 JavaScript”。它不会替你运行代码,但能在开发阶段发现很多拼写、字段和参数错误。
学习判断
现在适不适合学?
满足左侧情况可以开始;如果更符合右侧情况,先补基础通常更省时间。
- 已经能用 JavaScript 完成项目
- 正在维护接口数据多、组件多或多人协作的代码库
- 准备学习 Vue、React 或 Node.js 的工程项目
- 还没有掌握 JavaScript 对象、函数和模块
- 试图用类型代替运行时数据校验
- 只是为了消除报错而准备大量使用 any
学习前提
开始之前先会这些
- 先掌握 JavaScript,不建议跳过 JS 直接学 TS
- 理解对象、函数、数组和模块
- 知道运行时错误与编译期错误的区别
核心概念
先抓住这三个重点
类型推断
很多变量不需要手动写类型,TypeScript 会根据初始值推断。
接口与类型别名
用于描述对象结构、联合状态和函数参数,让数据边界清楚。
类型收窄
通过 typeof、in 或判断分支,把宽泛类型缩小到当前可以安全使用的类型。
最小示例
为接口数据定义类型
联合类型限制 role 只能取两个明确值,拼写错误会在开发阶段被发现。
TypeScript 5.9可以复制运行
type User = {
id: number
name: string
role: 'admin' | 'member'
}
function getLabel(user: User) {
return user.role === 'admin' ? `管理员:${user.name}` : user.name
}动手练习
按这个顺序做一遍
不要只复制最小示例。下面三项能独立完成,说明你已经开始掌握这项技术。
- 01
为一个 JavaScript 项目补充基础类型
- 02
用联合类型描述加载、成功和失败状态
- 03
将 API 返回值从 unknown 校验后收窄为业务类型
初学者常见误区
- 为了快速通过检查大量使用 any。
- 把类型断言 as 当成数据校验。
- 设计过度复杂的泛型,反而增加理解成本。
学完后的检查清单
- 会为对象、数组和函数定义类型
- 会使用联合类型和类型收窄
- 理解 unknown 比 any 更安全的原因
官方资料