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/02-spread-and-rest/README.md
+++ b/05-es6-plus/02-spread-and-rest/README.md
@@ -0,0 +1,24 @@
+# 练习 2：展开运算符和剩余参数
+
+## 目标
+
+学会复制数组、合并对象，以及用剩余参数接收不定数量的参数。
+
+## 你要练什么
+
+- 数组展开
+- 对象展开
+- 剩余参数
+
+## 任务
+
+- 复制一份课程数组并新增一项
+- 基于用户对象生成一个更新后的对象
+- 写一个 `sumScores` 函数，用剩余参数计算总分
+
+## 文件
+
+- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/starter.html)
+- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/starter.js)
+- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/answer.html)
+- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/answer.js)
--- a/05-es6-plus/02-spread-and-rest/answer.html
+++ b/05-es6-plus/02-spread-and-rest/answer.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>展开运算符和剩余参数</title>
+  </head>
+  <body>
+    <pre id="output"></pre>
+    <script src="./answer.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/02-spread-and-rest/answer.js
+++ b/05-es6-plus/02-spread-and-rest/answer.js
@@ -0,0 +1,24 @@
+const tracks = ["HTML", "CSS", "JavaScript"];
+
+const user = {
+  name: "林晨",
+  stage: "基础阶段",
+};
+
+function sumScores(...scores) {
+  return scores.reduce((total, score) => total + score, 0);
+}
+
+const newTracks = [...tracks, "ES6+"];
+const nextUser = { ...user, stage: "现代 JS" };
+const totalScore = sumScores(88, 91, 95);
+
+document.getElementById("output").textContent = JSON.stringify(
+  {
+    newTracks,
+    nextUser,
+    totalScore,
+  },
+  null,
+  2
+);
--- a/05-es6-plus/02-spread-and-rest/starter.html
+++ b/05-es6-plus/02-spread-and-rest/starter.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>展开运算符和剩余参数</title>
+  </head>
+  <body>
+    <pre id="output"></pre>
+    <script src="./starter.js"></script>
+  </body>
+</html>
--- a/05-es6-plus/02-spread-and-rest/starter.js
+++ b/05-es6-plus/02-spread-and-rest/starter.js
@@ -0,0 +1,16 @@
+const tracks = ["HTML", "CSS", "JavaScript"];
+
+const user = {
+  name: "林晨",
+  stage: "基础阶段",
+};
+
+function sumScores(...scores) {
+  // 返回总分
+}
+
+// 任务：
+// 1. 复制 tracks 并新增 "ES6+"
+// 2. 基于 user 生成一个 stage 为 "现代 JS" 的新对象
+// 3. 调用 sumScores
+// 4. 输出结果到 #output