← 返回技术雷达
建议学习开发语言难度:入门到进阶建议周期:2-4 周

TypeScript 5.9 与类型安全基础

在 JavaScript 基础上增加静态类型检查,提前发现字段、参数和状态使用错误。

TypeScriptTypesTooling

先用白话理解

它到底是什么?

TypeScript 可以理解为“带类型提示和检查的 JavaScript”。它不会替你运行代码,但能在开发阶段发现很多拼写、字段和参数错误。

学习判断

现在适不适合学?

满足左侧情况可以开始;如果更符合右侧情况,先补基础通常更省时间。

适合开始
  • 已经能用 JavaScript 完成项目
  • 正在维护接口数据多、组件多或多人协作的代码库
  • 准备学习 Vue、React 或 Node.js 的工程项目
可以先等等
  • 还没有掌握 JavaScript 对象、函数和模块
  • 试图用类型代替运行时数据校验
  • 只是为了消除报错而准备大量使用 any

学习前提

开始之前先会这些

  • 先掌握 JavaScript,不建议跳过 JS 直接学 TS
  • 理解对象、函数、数组和模块
  • 知道运行时错误与编译期错误的区别

核心概念

先抓住这三个重点

01

类型推断

很多变量不需要手动写类型,TypeScript 会根据初始值推断。

02

接口与类型别名

用于描述对象结构、联合状态和函数参数,让数据边界清楚。

03

类型收窄

通过 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
}

动手练习

按这个顺序做一遍

不要只复制最小示例。下面三项能独立完成,说明你已经开始掌握这项技术。

  1. 01

    为一个 JavaScript 项目补充基础类型

  2. 02

    用联合类型描述加载、成功和失败状态

  3. 03

    将 API 返回值从 unknown 校验后收窄为业务类型

初学者常见误区

  • 为了快速通过检查大量使用 any。
  • 把类型断言 as 当成数据校验。
  • 设计过度复杂的泛型,反而增加理解成本。

学完后的检查清单

  • 会为对象、数组和函数定义类型
  • 会使用联合类型和类型收窄
  • 理解 unknown 比 any 更安全的原因

官方资料

继续学习与查阅