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
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions

View File

@@ -8,7 +8,8 @@
- `02-css-layout`:预留给 CSS
- `03-javascript-core`:预留给 JavaScript
- `04-dom-events-async`:预留给 DOM + 事件 + 异步
- `05-typescript`:预留给 TypeScript
- `05-es6-plus`:预留给 ES6+(现代 JS
- `06-typescript`:预留给 TypeScript
## 当前可学内容
@@ -33,15 +34,41 @@
- `starter.js` 起始代码
- `answer.js` 参考答案
前三部分现在已经补充到“核心主线 + 常见细分知识点”。
现在已经整理好 `04-dom-events-async`,里面包含:
- DOM + 事件 + 异步讲义
- 分阶段练习
- `starter.html` / `starter.js` 起始代码
- `answer.html` / `answer.js` 参考答案
现在也已经整理好 `05-es6-plus`,里面包含:
- ES6+(现代 JS讲义
- 分阶段练习
- `starter.html` / `starter.js` 起始代码
- `answer.html` / `answer.js` 参考答案
现在也已经整理好 `06-typescript`,里面包含:
- TypeScript类型系统讲义
- 分阶段练习
- `starter.ts` 起始代码
- `answer.ts` 参考答案
- `Vite + TypeScript` 学习面板
前六部分现在都已经补充到“核心主线 + 常见细分知识点”。
## 使用方式
1. 先阅读 [01-html-structure/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/README.md)
2. 再阅读 [02-css-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/README.md)
3. 再阅读 [03-javascript-core/README.md](/Volumes/Macintosh HD 1/home/front-end-example/03-javascript-core/README.md)
4. 按顺序完成每个练习目录
5. 先写 `starter.html``starter.css``starter.js`
6. 写完后再对照答案文件
1. 先阅读 [01-html-structure/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/01-html-structure/README.md)
2. 再阅读 [02-css-layout/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/02-css-layout/README.md)
3. 再阅读 [03-javascript-core/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/README.md)
4. 再阅读 [04-dom-events-async/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/README.md)
5. 再阅读 [05-es6-plus/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/README.md)
6. 再阅读 [06-typescript/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript/README.md)
7. 按顺序完成每个练习目录
8. 先写 `starter.html``starter.css``starter.js``starter.ts`
9. 写完后再对照答案文件
10.`06-typescript` 时,也可以进入 [06-typescript](/Users/lijiaqing/home/wwwroot/front-end-example/06-typescript) 后执行 `npm install``npm run dev`
如果你后面要继续学其他知识点,我可以按同样结构继续给你补 `04-dom-events-async``05-typescript`目录。
如果你后面要继续学其他知识点,我可以按同样结构继续给你补更多工程化目录。