TypeScript 学习笔记

这是一份给自己看的笔记。每节课的内容都会追加到这里，方便回头复习。

进度：第 0 课（环境与第一个文件）— 进行中

学习路线

目标：开发微信小游戏。这个目标决定了要学什么、不用学什么。

目标确认

  • 已有微信小游戏 AppID（发布阶段才用得上，现在不用配）
  • 引擎选 Cocos Creator 3.x（TS 原生、导出小游戏一键、中文文档全）
  • 游戏类型待定，建议等阶段二的手写 demo 做完再定 —— 那时候你会知道自己更想做哪种

前置知识

  • HTML / CSS 不用学。 小游戏没有 DOM，没有网页标签，画面全靠 Canvas / WebGL 画出来，界面用游戏引擎的 UI 系统。
  • JavaScript 必须学，但只学「游戏用得到的那部分」：变量、函数、对象、数组、条件、循环、事件回调。
  • TypeScript 值得学：Cocos Creator 默认就用 TS，类型能帮你在写游戏逻辑时少踩一半坑。

四个阶段

阶段 内容 产出
一、语言（现在在这里） JS 基础 + TS 类型，配对教学 能读懂、能改、能自己写小段逻辑
二、游戏基本功 Canvas 2D 绘制、坐标系、游戏循环、触摸输入、碰撞检测、资源加载、状态机 手写一个能玩的小 demo（比如接住掉落物）
三、引擎 Cocos Creator 3.x：场景/节点/组件、预制体、动画、UI、音频、物理 用引擎做出完整小游戏
四、发布 微信开发者工具、AppID、分包、性能优化、审核规范、变现方式 真机预览 → 提审上线

阶段一的课时

课 先学 JS 紧接着学 TS
第 0 课 程序怎么跑起来 类型检查发生在编译期
第 1 课 变量、字符串、数字、布尔 类型标注、类型推断
第 2 课 函数、参数、返回值 函数签名、可选参数、void
第 3 课 对象、数组 interface / type、数组元素类型
第 4 课 if、循环 类型收窄（typeof、in）
第 5 课 多分支、状态 联合类型、字面量类型、可辨识联合
第 6 课 怎么复用代码 泛型入门

阶段一结束才进阶段二。基础没打牢就上引擎，等于开着飞机学走路。

第 0 课：环境与第一个文件

这一课不涉及语法，目标只有一个：让电脑能跑 TypeScript，并且亲眼看到「类型错误在编译前就被拦下来」。

本课拆成小步走，每做完一步等确认再继续： 0.1 装 Node → 0.2 跑第一个 JS 文件 → 0.3 装 TypeScript → 0.4 编译一次 → 0.5 看类型报错

先讲概念（小白必读，别跳过）

1. 程序是怎么跑起来的

你写的代码是纯文本，CPU 看不懂。中间必须有个「翻译」，把文本变成机器能执行的指令。这个翻译过程，笼统地叫编译或解释。

JavaScript 的做法是：浏览器或 Node 拿到源码，边读边执行。好处是改完刷新就生效，坏处是 —— 只有真正跑到那一行，才知道那里有没有错。

2. JavaScript 的「宽松」

JS 里变量的类型跟着值走，而且允许乱来：

let age = 18;
age = "十八";            // 不报错，值被换成了字符串
console.log(1 + "1");    // 输出 "11"，不是 2

项目小的时候能忍，项目一大就是灾难：你以为是数字，实际是字符串，结果算错了，但程序不崩，错误悄悄往下传。

3. TypeScript 到底做了什么

TS 在 JS 的语法上加了一层「类型标注」，然后在你运行之前先做一遍静态检查：

let age: number = 18;
age = "十八";   // 这里直接标红，不许过

要记住三件事：

  • TS 不改变 JS 的运行方式，它最后还是会变成 JS 去跑
  • 类型检查发生在写代码 / 编译的时候，不是运行时
  • 类型在编译后被全部擦掉，运行时一点痕迹都没有（所以它不占性能）

4. 四个必须分清的词

词 意思 什么时候出问题
编译期 把 .ts 翻译成 .js、同时检查类型的阶段 你保存文件、敲运行命令的那一刻
运行期 .js 真正在 Node 里跑起来 程序真的执行到那一行
类型错误 类型对不上，比如 TS2322 编译期，程序还没跑
运行时错误 比如读了个不存在的文件、数组越界 运行期

一句话记住：类型错误永远发生在程序跑起来之前。如果程序跑起来了还崩，那是运行时错误，TS 管不了。

5. npm、package.json、node_modules 是什么

  • npm = Node 的「应用商店 + 管家」
  • package.json = 购物清单（记录这个项目装了哪些包）
  • node_modules = 仓库（真正下载下来的包都在这）
  • npm i -D typescript = 从商店买 typescript，记进清单，放进仓库（-D 表示「只在开发时用」）

6. tsc、tsx、tsconfig.json 分别是什么

  • tsc = TypeScript 编译器（TypeScript Compiler），负责检查类型 + 生成 .js，是这门语言的「正规军」
  • tsx = 一个帮你「把 .ts 直接跑起来」的工具（内部先转译再交给 Node），学习期用它最省事
  • tsconfig.json = 给编译器看的设置文件，相当于「编译器的遥控器」；strict: true 就是把安全等级调到最高

7. 为什么 strict 一定要开

JS 有一堆历史包袱式的宽松行为：隐式 any、null 不检查、函数有的分支不返回值也不报错。strict 把这些全部升级成错误，逼你把每种情况想清楚 —— 这恰好是新手最该练的东西。现在被烦，总比写了几千行再回头补强。

1. 装 Node.js

TypeScript 的运行工具都挂在 Node 上，所以先装 Node。

打开 PowerShell（普通权限就行），执行：

winget install OpenJS.NodeJS.LTS

没有 winget 就去 nodejs.org 下 LTS 版本，一路默认安装。装完关掉 PowerShell 重新开一个，然后验证：

node -v
npm -v

正常会输出两个版本号，比如 v22.20.0 和 10.9.0。看到版本号才算过，报「无法识别」说明 PATH 没生效，重启电脑再试。

2. 建一个专门的学习目录

不要丢在桌面，单独建一个文件夹，以后所有练习都放这里：

mkdir D:\ts-study
cd D:\ts-study
npm init -y
npm i -D typescript tsx @types/node

三个包各自的作用：

  • typescript：编译器本体，提供 tsc 命令
  • tsx：直接运行 .ts 文件的工具，省掉「先编译再运行」这一步
  • @types/node：告诉 TypeScript「Node 有哪些内置功能」，不然用 console 都可能报类型错

3. 生成配置文件

npx tsc --init

会生成一个 tsconfig.json。打开它，把这一行的注释去掉（默认是注释状态）：

"strict": true

strict 是 TypeScript 最有价值的一个开关：它把「可能为 null」「隐式 any」「函数返回值不一致」这些问题全部升级成错误。新手期一定要开，宁可现在被烦，也别等写了几千行再回头补。

4. 第一个文件

在 D:\ts-study 下新建 hello.ts：

const name: string = "宝库";
const age: number = 18;

function greet(who: string): string {
  return `你好，${who}`;
}

console.log(greet(name));
console.log(`${name} 今年 ${age} 岁`);

运行：

npx tsx hello.ts

应该输出：

你好，宝库
宝库 今年 18 岁

5. 亲手制造一个错误

把 const age: number = 18; 改成：

const age: number = "18";

再运行一次。你会看到类似这样的报错：

hello.ts:2:7 - error TS2322: Type 'string' is not assignable to type 'number'.

这一行就是 TypeScript 的全部意义：错误在运行之前就被发现了。JavaScript 要到运行时才算、才崩，TypeScript 在写的时候就告诉你「这不对」。

改回去，这门课的第一个闭环就完成了。

本课作业

三道题，都是改代码，做完把代码和输出一起贴给我。

作业 1：在 hello.ts 里加一个变量 const isStudent: boolean = true;，用 console.log 打印出来。

作业 2：写一个函数 add(a: number, b: number): number，返回两数之和，调用它打印 3 + 5 = 8。

作业 3：故意写一个类型错误（比如把字符串赋给 number 变量），然后把完整报错贴给我，并用自己的话说明：报错里的 TS2322 和 Type 'string' is not assignable to type 'number' 分别在说什么。

本课验收（能答上来再往下走）

  1. 类型错误是在编译期还是运行期被发现的？
  2. tsc 和 tsx 分别干什么？为什么学习期用 tsx？
  3. strict: true 到底改变了什么？
  4. 程序跑起来之后崩了（比如读文件失败），TypeScript 管得着吗？

答不上来就回头再看一遍第 3、4、6、7 小节 —— 这四个问题就是这一课的全部。

常见问题

  • npx 卡住不动：npm 源的问题，执行 npm config set registry https://registry.npmmirror.com 再试
  • tsx 找不到：确认当前目录是 D:\ts-study，而且 package.json 里有 tsx 这个依赖
  • 编辑器没提示：装 VS Code 后打开整个文件夹（不是单个文件），TypeScript 支持是内置的，不用装插件

第 1 课：类型基础

（下一课写）