feat: add TypeScript lessons and learning panel
- Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.
This commit is contained in:
charlie
170
06-typescript/README.md
Normal file
170
06-typescript/README.md
Normal file
@@ -0,0 +1,170 @@
|
||||
# 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 组练习，避免不同练习之间的全局变量互相污染
|
||||
- 原来的练习目录仍然保留，继续作为题目和答案素材使用
|
||||
Reference in New Issue
Block a user