[toc]

Lecture06-TypeScript 基础（用 node + tsx 运行）

1、本节讲什么

学会给变量、函数、对象"贴类型标签"，本质就是你熟悉的 Java 强类型。用 tsx 让 node 直接跑 .ts 文件。它在 Vibe Coding 里价值尤其大：类型写对，AI 生成的代码错误率会明显降低。

2、概念速览

什么是 TypeScript：JS 的"带类型"版本。你在 JS 基础上给变量、函数、对象加类型标签，本质就是你熟悉的 Java 强类型。

TS vs JS 一句话：JS 弱类型（写啥都行、运行才报错）；TS 强类型（写错立刻标红、编译期拦住）。TS 最终会编译成 JS，JavaScript引擎只认 JS。

类比：TS 对 JS，就像 Java 对"只写动态类型的脚本"——多一层类型检查，少一堆运行时 Bug。

正确 vs 误区：TS 不是新语言，是 JS 的超集；类型不是负担，是 AI 帮你写代码时的"护栏"。

3、先看效果

新建 type-demo.ts，粘贴下面代码：

interface User {
  name: string   // 字段类型：和 Java 的 String 一样
  age: number
  isStudent: boolean
}

function greet(u: User): string {        // 入参类型 + 返回类型
  return `你好，${u.name}，${u.age}岁`
}

const student: User = { name: '小红', age: 22, isStudent: true }
console.log(greet(student))

附带说明：你好，${u.name}，${u.age}岁怎么理解？

语法名称：模板字符串

功能作用：为了方便在字符串中引用前面变量的值，类似于 Python 中的 f 字符串

语法细节：

• 字符串两边需要使用『`』
• 在字符串内部使用 ${} 引用变量，${u.name} 中 u 表示引用 User 对象然后访问 User 对象的 name 属性

运行：

npx tsx type-demo.ts      # 输出：你好，小红，22岁

现在把 age: 22 故意改成 age: 'abc'，保存后 VS Code 会立刻标红；再运行 npx tsx type-demo.ts，终端也会报类型错误。这就是 TS 帮你"早发现 Bug"。

4、照着做

1. 建 type-demo.ts，粘贴、npx tsx type-demo.ts，看输出。
2. 故意写错类型（age: 'abc'），同时看 VS Code 标红 和 终端报错 两处提示。
3. 再给 greet 的返回值写错类型，观察报错位置。

补充：TS 的两种跑法 —— tsx vs --experimental-strip-types

Node 本身不认识 TypeScript（interface、: number 这些它看不懂），所以跑 .ts 有两条路：

• tsx（推荐）：tsx 用 esbuild 把 TS 完整转成 JS 再跑，支持 TS 全部特性（enum、namespace 都行）。用 npx tsx 文件.ts。
• --experimental-strip-types（零依赖）：Node 22.6+ 自带的实验功能，运行时把类型"剥掉"再当 JS 跑。所谓"剥类型"= 删掉 interface、: number 这类类型语法（它们只对编译期检查有用、对运行没作用），剩下的就是纯 JS。

教程统一用 tsx；--experimental-strip-types 知道有这回事、临时验证时可用即可。

课堂代码

// 1、声明一下对象的类型
interface Animal {
    animalName: string,
    animalAge: number,
    animalPrice: number,
    isDelicious: boolean
}

// 2、声明一个带有类型约束的函数
function showAnimalInfo(animal: Animal): string {
    return `今天为您准备的是：${animal.animalName}，年龄：${animal.animalAge}，价格：${animal.animalPrice}，味道：${animal.isDelicious ? '好吃' : '不好吃'} `;
}

// 3、实际创建一个 Animal 对象
const animalObj: Animal = {
    animalName: "小猪",
    animalAge: 3,
    animalPrice: 55.5,
    isDelicious: true
};

// 4、调用函数
const animalInfo: string = showAnimalInfo(animalObj);
console.log(`动物信息：${animalInfo}`)

实测效果如下：

PS D:\space-code\atguigu-project-front-260525\module02-JavaScript> node .\File15-TypeScript.ts 动物信息：今天为您准备的是：小猪，年龄：3，价格：55.5，味道：好吃 PS D:\space-code\atguigu-project-front-260525\module02-JavaScript> npx tsx .\File15-TypeScript.ts 动物信息：今天为您准备的是：小猪，年龄：3，价格：55.5，味道：好吃 PS D:\space-code\atguigu-project-front-260525\module02-JavaScript> node --experimental-strip-types .\File15-TypeScript.ts 动物信息：今天为您准备的是：小猪，年龄：3，价格：55.5，味道：好吃

5、常见疑问

• Q：interface 和 Java 的 interface 一样吗？ A：TypeScript 用法上更像"数据模型"，描述一个对象有哪些字段和类型。Vue 里用它描述接口返回的数据结构，特别好用。而 Java 中的接口则主要是定义对象应该具备的行为
• Q：类型写起来麻烦，能不能不写？ A：能，但第 32 节规范要求"接口数据必须有类型"。麻烦一时，换来 AI 少犯错、自己好排查。
• Q：string / number / boolean / any 各是什么？ A：字符串（不像Java区分字符、字符串；JavaScript中单引号、双引号都是定义字符串）、数值（不区分整数、小数）、布尔、任意类型。any 能不用就不用，用了等于放弃类型检查。
• Q：两种跑法怎么选？ A：见上面的"补充：TS 的两种跑法"。教程统一用 tsx，临时验证可用 --experimental-strip-types。

6、规范要点

• 接口数据必须定义 interface 并标注类型，不用 any。
• 函数入参和返回值都写类型。
• 类型名大驼峰（User、OrderItem），字段小驼峰。

7、本节验证

• 会用 interface 给对象定义字段和类型 ✅
• 会给函数标注入参和返回值类型，并用 npx tsx 文件.ts 跑出结果 ✅
• 知道故意写错类型时，VS Code 会标红、终端也会报错 ✅
• 会用模板字符串（反引号 + ${}）在字符串里引用变量 ✅
• 知道 tsx 与 --experimental-strip-types 两种跑法的区别，教程统一用 tsx ✅