Files
front-end-example/06-typescript

TypeScript类型系统

这部分只解决一个问题:你能不能在写代码阶段就让错误尽量提前暴露,而不是把问题留到运行时。

学完后你应该掌握

  • TypeScript 和 JavaScript 的差别
  • 基本类型标注
  • 数组类型和函数参数/返回值类型
  • interface 描述对象结构
  • 泛型函数的基本写法
  • 联合类型和可选属性
  • 如何用类型约束一组业务数据
  • 如何把这些类型能力组合成一个小程序

TypeScript 是什么

TypeScript 不是让程序“更能运行”,而是让程序“更不容易写错”。

它回答的是:

  • 这个值应该是什么类型
  • 这个函数该接收什么参数
  • 这个对象应该有哪些字段
  • 一组数据之间的结构是否一致

如果 JavaScript 更关注“能不能表达逻辑”,那么 TypeScript 更关注“表达出来的逻辑有没有类型保障”。

必须建立的 5 个核心意识

1. 类型信息是写给人和工具看的约束

function add(a: number, b: number): number {
  return a + b;
}

这段代码的重点不是语法更复杂,而是把“这个函数只能接收数字”说清楚了。

2. TypeScript 的价值主要发生在运行前

TypeScript 很多时候不是修复 bug而是阻止 bug 被写进去。

3. 对象结构要先约定,再使用

当数据开始变复杂时,优先考虑用 interface 或类型别名描述结构。

4. 泛型是在复用“结构能力”

泛型不是高难技巧,它本质上是在说:

  • 这个函数可以处理很多类型
  • 但输入和输出之间的类型关系要保持一致

5. 类型要服务于业务,不要为了类型而类型

目标不是把代码写得最花,而是让代码更清晰、更稳。

高频概念速记

基本类型

  • number
  • string
  • boolean

容器类型

  • number[]
  • string[]
  • Array<T>

函数类型

  • 参数类型
  • 返回值类型

对象结构

  • interface

进阶类型

  • 泛型 <T>
  • 联合类型 |
  • 可选属性 ?

学习顺序

  1. JavaScript 和 TypeScript 的差别
  2. 基本类型标注
  3. 数组和函数类型
  4. interface
  5. 泛型
  6. 联合类型和可选属性
  7. 类型安全渲染
  8. 综合小练习

练习目录

过关标准

如果你能独立做到下面这些,就说明这一章已经基本过关:

  • 能给基本值加类型标注
  • 能给数组和函数写正确类型
  • 能用 interface 描述对象结构
  • 能写一个简单泛型函数
  • 能理解联合类型和可选属性的使用场景
  • 能看懂 TypeScript 在写代码阶段提示的问题
  • 能把类型约束用到一个小型数据模型里

学习建议

  • 先保证类型写对,再考虑写得更少
  • 报错时先看“期望类型”和“实际类型”分别是什么
  • 不确定对象结构时,先写接口再写数据
  • 遇到泛型不要先背定义,先看输入输出是不是保持同类关系

运行调试

这一章现在已经做成了 Vite + TypeScript 工程。

它保留了原来的 8 个练习目录,同时新增了一个统一的学习面板,你可以在浏览器里切换章节、查看 starter.ts、查看 answer.ts,并直接看到示例输出。

启动方式

06-typescript 目录执行:

npm install
npm run dev

常用命令

npm run dev
npm run build
npm run preview
npm run check
npm run check:app
npm run check:lessons

工程入口

说明

  • npm run check 会先检查 src/ 下的 Vite 入口代码,再逐个检查每个练习目录里的 starter.tsanswer.ts
  • npm run check:app 只检查 Vite 应用入口
  • npm run check:lessons 会按文件逐个检查 8 组练习,避免不同练习之间的全局变量互相污染
  • 原来的练习目录仍然保留,继续作为题目和答案素材使用