JavaScript 演示教程：先看懂运行，再加入 TypeScript

准备工作

• Chrome 或 Edge 浏览器
• Node.js 20 或更高版本
• VS Code
• 新建空目录 javascript-price-demo

node --version
npm --version

第一章：JavaScript 是什么？

Demo

Screen

打开任意网页，按 F12 进入开发者工具并切换到 Console。粘贴代码后，页面出现按钮；点击后按钮文字改变。

Command

const button = document.createElement("button");
button.textContent = "点我";
button.onclick = () => {
  button.textContent = "JavaScript 收到点击了！";
};
document.body.append(button);

Output

页面新增按钮：点我
点击后变为：JavaScript 收到点击了！

Narration

JavaScript 是一门编程语言，它把“发生什么时，按什么顺序做什么”写成指令。这里的代码创建按钮、监听点击、修改文字，浏览器里的 JavaScript 引擎负责执行。浏览器还提供 DOM，也就是操作页面的接口，所以代码能真的改变眼前的网页。JavaScript 不等于浏览器：Node.js 也能执行它，只是提供的环境能力不同。

第二章：用函数处理数据

Demo

Screen

在项目目录创建 price.js，运行后终端打印正常结果和错误提示。

Command

function checkout(price, count) {
  if (count <= 0) return "数量必须大于 0";
  return `总价：${price * count} 元`;
}

console.log(checkout(39, 2));
console.log(checkout(39, 0));

node price.js

Output

总价：78 元
数量必须大于 0

Narration

变量保存数据，条件选择分支，函数把步骤命名并复用。参数是进入函数的数据，return 是函数交出的结果。注意输入框返回的通常是文字："2" + 1 会得到 "21"。做计算前用 Number() 明确转换，不要依赖 JavaScript 猜你的意图。

第三章：把静态页面变成交互程序

Demo

Screen

创建 index.html，双击在浏览器打开。修改数量并点击“计算”，页面立即显示总价。

Command

<!doctype html>
<html lang="zh-CN">
  <body>
    <input id="count" type="number" value="1">
    <button id="buy">计算</button>
    <p id="result">等待计算</p>
    <script>
      const count = document.querySelector("#count");
      const result = document.querySelector("#result");
      document.querySelector("#buy").addEventListener("click", () => {
        result.textContent = `总价：${Number(count.value) * 39} 元`;
      });
    </script>
  </body>
</html>

Output

数量输入 3，点击“计算”
页面显示：总价：117 元

Narration

querySelector 从 DOM 中找到页面元素，addEventListener 表示点击发生时再执行函数，textContent 把结果画回页面。事件决定何时执行，DOM 决定改动哪里。这就是网页交互最小闭环：读取输入、处理数据、更新输出。如果点击没有反应，先检查 Console，再确认选择器和 HTML 的 id 完全一致。

第四章：TypeScript 怎样检查 JavaScript？

Demo

Screen

安装 TypeScript，创建 price.ts。先故意传入文字观察报错，再改成数字完成编译并运行生成的 JavaScript。

Command

npm init -y
npm install --save-dev typescript
npx tsc --init --strict

type Product = { name: string; price: number };

function total(product: Product, count: number): number {
  return product.price * count;
}

const book = { name: "JavaScript 入门", price: 39 };
console.log(total(book, 2));

npx tsc price.ts
node price.js

Output

78

Narration

TypeScript 是 JavaScript 的类型化扩展，不是浏览器里的另一套运行语言。把最后的 2 改成 "2"，它会在开发阶段提示参数类型错误。修正后，tsc 检查 .ts 文件并生成 .js 文件，Node 真正执行的仍是 JavaScript。不要用 any 只为消除提示；它会绕开这层护栏。

最终项目：把价格计算器迁移到 TypeScript

Demo

Screen

创建 app.ts，把 index.html 中的内联脚本删除并改为 <script src="app.js"></script>。编译后刷新页面，原有交互继续工作。

Command

const count = document.querySelector<HTMLInputElement>("#count");
const buy = document.querySelector<HTMLButtonElement>("#buy");
const result = document.querySelector<HTMLParagraphElement>("#result");

function calculate(price: number, amount: number): number {
  return price * amount;
}

buy?.addEventListener("click", () => {
  if (!count || !result) return;
  result.textContent = `总价：${calculate(39, Number(count.value))} 元`;
});

npx tsc app.ts --lib DOM,ES2020 --target ES2020

Output

生成 app.js
数量输入 4，点击“计算”
页面显示：总价：156 元

Narration

现在主线完整了：JavaScript 的函数负责计算，浏览器的事件与 DOM 负责交互，TypeScript 检查元素和函数边界，再生成 JavaScript。DOM 查询可能找不到元素，所以代码先判断空值。类型只能检查开发时假设，外部接口数据仍需运行时验证。

验证清单

• node price.js 输出 78
• 浏览器能按输入数量计算价格
• npx tsc app.ts --noEmit --lib DOM,ES2020 没有类型错误
• 临时把 calculate(39, "4") 写进代码时，TypeScript 会报错

排错

• 找不到 tsc：先安装依赖，再使用 npx tsc
• 页面没变化：确认 HTML 引用的是编译生成的 app.js
• 元素始终为空：检查 querySelector 与 HTML 的 id 是否一致
• Console 禁止粘贴：按浏览器提示手动输入允许粘贴的文字，或直接使用本地 HTML

下一步

先继续练习 JavaScript 的数组、对象、异步请求与错误处理，再把一个待办列表从 .js 渐进迁移到 .ts。始终记住：JavaScript 决定程序怎样运行，TypeScript 帮你在运行前检查关键假设。