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/06-async-await/README.md
+++ b/05-es6-plus/06-async-await/README.md
@@ -0,0 +1,24 @@
+# 练习 6：async / await
+
+## 目标
+
+学会用 `async` / `await` 改写一个 Promise 流程。
+
+## 你要练什么
+
+- `async`
+- `await`
+- `try...catch`
+
+## 任务
+
+- 写一个 `async` 函数等待课程配置
+- 成功时渲染结果
+- 失败时更新状态
+
+## 文件
+
+- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/starter.html)
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/starter.js)
+- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/answer.html)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/answer.js)
--- a/05-es6-plus/06-async-await/answer.html
+++ b/05-es6-plus/06-async-await/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>async / await</title>
+  </head>
+  <body>
+    <p id="status">等待加载</p>
+    <pre id="output"></pre>
+    <script src="./answer.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/06-async-await/answer.js
+++ b/05-es6-plus/06-async-await/answer.js
@@ -0,0 +1,27 @@
+function loadConfig() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        title: "现代 JS 面板",
+        level: "进阶",
+      });
+    }, 800);
+  });
+}
+
+const status = document.getElementById("status");
+const output = document.getElementById("output");
+
+async function renderConfig() {
+  status.textContent = "加载中...";
+
+  try {
+    const config = await loadConfig();
+    status.textContent = "加载完成";
+    output.textContent = `${config.title} - ${config.level}`;
+  } catch (error) {
+    status.textContent = "加载失败";
+  }
+}
+
+renderConfig();
--- a/05-es6-plus/06-async-await/starter.html
+++ b/05-es6-plus/06-async-await/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>async / await</title>
+  </head>
+  <body>
+    <p id="status">等待加载</p>
+    <pre id="output"></pre>
+    <script src="./starter.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/06-async-await/starter.js
+++ b/05-es6-plus/06-async-await/starter.js
@@ -0,0 +1,15 @@
+function loadConfig() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        title: "现代 JS 面板",
+        level: "进阶",
+      });
+    }, 800);
+  });
+}
+
+// 任务：
+// 1. 写一个 async 函数
+// 2. 用 await 等待 loadConfig()
+// 3. 用 try...catch 处理流程