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.
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
--- a/05-es6-plus/05-promise-basics/README.md
+++ b/05-es6-plus/05-promise-basics/README.md
@@ -0,0 +1,24 @@
+# 练习 5：Promise 基础
+
+## 目标
+
+学会用 Promise 表达异步结果。
+
+## 你要练什么
+
+- Promise
+- `.then()`
+- `.catch()`
+
+## 任务
+
+- 调用模拟请求函数
+- 成功时渲染课程数据
+- 失败时渲染错误状态
+
+## 文件
+
+- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/starter.html)
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/starter.js)
+- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/answer.html)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/answer.js)
--- a/05-es6-plus/05-promise-basics/answer.html
+++ b/05-es6-plus/05-promise-basics/answer.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Promise 基础</title>
+  </head>
+  <body>
+    <p id="status">等待加载</p>
+    <pre id="output"></pre>
+    <script src="./answer.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/05-promise-basics/answer.js
+++ b/05-es6-plus/05-promise-basics/answer.js
@@ -0,0 +1,21 @@
+function loadTracks() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(["模板字符串", "模块化", "async/await"]);
+    }, 700);
+  });
+}
+
+const status = document.getElementById("status");
+const output = document.getElementById("output");
+
+status.textContent = "加载中...";
+
+loadTracks()
+  .then((tracks) => {
+    status.textContent = "加载完成";
+    output.textContent = tracks.join("\n");
+  })
+  .catch(() => {
+    status.textContent = "加载失败";
+  });
--- a/05-es6-plus/05-promise-basics/starter.html
+++ b/05-es6-plus/05-promise-basics/starter.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Promise 基础</title>
+  </head>
+  <body>
+    <p id="status">等待加载</p>
+    <pre id="output"></pre>
+    <script src="./starter.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/05-promise-basics/starter.js
+++ b/05-es6-plus/05-promise-basics/starter.js
@@ -0,0 +1,12 @@
+function loadTracks() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(["模板字符串", "模块化", "async/await"]);
+    }, 700);
+  });
+}
+
+// 任务：
+// 1. 调用 loadTracks()
+// 2. 成功时更新状态和输出内容
+// 3. 失败时更新状态