# TypeScript（类型系统）

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

## 学完后你应该掌握

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

## TypeScript 是什么

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

它回答的是：

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

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

## 必须建立的 5 个核心意识

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

```ts
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. 综合小练习

## 练习目录

- [01-js-vs-ts/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/01-js-vs-ts/README.md)
- [02-basic-type-annotations/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/02-basic-type-annotations/README.md)
- [03-array-and-function-types/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/03-array-and-function-types/README.md)
- [04-interface-object-shape/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/04-interface-object-shape/README.md)
- [05-generic-functions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/05-generic-functions/README.md)
- [06-union-and-optional-props/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/06-union-and-optional-props/README.md)
- [07-type-safe-renderer/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/07-type-safe-renderer/README.md)
- [08-final-mini-app/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/08-final-mini-app/README.md)

## 过关标准

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

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

## 学习建议

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

## 运行调试

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

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

### 启动方式

在 [06-typescript](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript) 目录执行：

```bash
npm install
npm run dev
```

### 常用命令

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

### 工程入口

- 入口页面：[index.html](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/index.html)
- 应用入口：[src/main.ts](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/src/main.ts)
- 章节数据：[src/lessons.ts](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/src/lessons.ts)
- 页面样式：[src/style.css](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/src/style.css)
- 包管理配置：[package.json](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/package.json)
- TypeScript 配置：[tsconfig.json](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/tsconfig.json)

### 说明

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