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. 类型要服务于业务,不要为了类型而类型
目标不是把代码写得最花,而是让代码更清晰、更稳。
高频概念速记
基本类型
numberstringboolean
容器类型
number[]string[]Array<T>
函数类型
- 参数类型
- 返回值类型
对象结构
interface
进阶类型
- 泛型
<T> - 联合类型
| - 可选属性
?
学习顺序
- JavaScript 和 TypeScript 的差别
- 基本类型标注
- 数组和函数类型
interface- 泛型
- 联合类型和可选属性
- 类型安全渲染
- 综合小练习
练习目录
- 01-js-vs-ts/README.md
- 02-basic-type-annotations/README.md
- 03-array-and-function-types/README.md
- 04-interface-object-shape/README.md
- 05-generic-functions/README.md
- 06-union-and-optional-props/README.md
- 07-type-safe-renderer/README.md
- 08-final-mini-app/README.md
过关标准
如果你能独立做到下面这些,就说明这一章已经基本过关:
- 能给基本值加类型标注
- 能给数组和函数写正确类型
- 能用
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
工程入口
- 入口页面:index.html
- 应用入口:src/main.ts
- 章节数据:src/lessons.ts
- 页面样式:src/style.css
- 包管理配置:package.json
- TypeScript 配置:tsconfig.json
说明
npm run check会先检查src/下的 Vite 入口代码,再逐个检查每个练习目录里的starter.ts和answer.tsnpm run check:app只检查 Vite 应用入口npm run check:lessons会按文件逐个检查 8 组练习,避免不同练习之间的全局变量互相污染- 原来的练习目录仍然保留,继续作为题目和答案素材使用