阮一峰《TypeScript 教程》学习笔记——基本用法

1. 一段话总结

TypeScript 基本用法的核心包括类型声明 （可选，语法为"标识符:类型"，需保证值与声明类型一致，未赋值变量不可使用）与类型推断 （无声明时 TS 自动根据赋值推断类型，后续赋值类型不一致会报错，确保所有 JS 代码合法兼容）；因 JS 运行环境（浏览器/Node.js）不识别 TS，需通过编译转为 JS，关键工具包括在线的TypeScript Playground （快速编译、调试、分享代码）、官方tsc编译器 （需 npm 全局安装，支持多文件编译、指定输出文件/目录/JS版本等参数，默认报错仍生成产物，可通过--noEmitOnError禁用）、tsconfig.json （存储编译配置，运行tsc时自动读取，简化命令）及非官方ts-node模块 （直接运行 TS 脚本或进入 REPL 环境），同时需明确值与类型的分离（TS 处理类型代码，JS 处理值代码，编译时移除类型代码）。

2. 思维导图

3. 详细总结

3.1 核心概念：类型声明

TypeScript 最显著的特征是为 JS 变量、函数参数/返回值添加类型声明，明确值的合法类型。

语法规则 ：一律在标识符后添加": + 类型"，格式为 标识符: 类型。
- 变量声明示例：let foo:string;（声明 foo 为字符串类型）
- 函数声明示例：function toString(num:number):string { return String(num); }（参数 num 为 number 类型，返回值为 string 类型）
关键约束 ：
1. 变量赋值需与声明类型一致，否则报错。例如：let foo:string = 123;（报错，string 类型不能赋值为 number）。
2. 未赋值的变量不可使用，否则报错。例如：let x:number; console.log(x);（报错，变量 x 未初始化），而 JS 中未赋值变量会返回 undefined 且不报错。

3.2 核心概念：类型推断

类型声明并非必需，若省略声明，TypeScript 会自动推断类型，这是 TS 兼容 JS 的关键设计。

推断规则 ：根据变量的初始赋值、函数的返回值自动确定类型。
- 变量推断示例：let foo = 123;（TS 推断 foo 为 number 类型，后续赋值 foo = 'hello' 会报错）。
- 函数返回值推断示例：function toString(num:number) { return String(num); }（TS 推断返回值为 string 类型，因此函数返回值类型通常可省略）。
核心优势 ：
1. 所有 JS 代码都是合法的 TS 代码（无需修改即可在 TS 环境运行）。
2. 老 JS 项目迁移 TS 时，可逐步添加类型声明，无需一次性改造所有代码。

3.3 核心概念：值与类型

学习 TS 需严格区分**"值"（value）** 和**"类型"（type）**，二者职责分离：

值：具体的数据（如 3、'hello'），由 JavaScript 处理（负责运行时逻辑）。
类型：值的元属性（如 3 的类型是 number），由 TypeScript 处理（负责编译时类型检查）。
编译逻辑 ：TS 编译时会完全移除所有类型代码，仅保留值代码（即最终生成的 JS 代码不含任何类型信息），因此 TS 仅做编译时类型检查，不影响 JS 运行结果。

3.4 编译基础：为什么需要编译？

JavaScript 运行环境（浏览器、Node.js）无法识别 TypeScript 代码，因此 TS 项目必须先通过编译转换为 JS 代码，才能运行。TS 官方仅提供编译器，不提供运行环境。

3.5 在线工具：TypeScript Playground

最简单的 TS 调试工具，无需本地安装，直接通过官网网页使用：

核心功能 ：
1. 实时编译：输入 TS 代码，自动生成对应的 JS 代码。
2. 报错提示：实时显示类型错误及详细信息。
3. 执行产物：可在浏览器中直接运行编译后的 JS 代码。
4. 分享代码：支持将代码片段和编译器设置保存为 URL，分享给他人。
使用建议：本书所有示例均可在此工具中验证、调试。

3.6 官方编译器：tsc

TypeScript 官方提供的编译器 tsc，用于将 .ts 文件（TS 脚本）转换为 .js 文件（JS 脚本），是本地开发的核心工具。

3.6.1 tsc 安装

tsc 是 npm 模块，需先安装 Node.js（自带 npm），再通过以下命令全局安装：

bash 复制代码

npm install -g typescript

安装验证 ：运行 tsc -v 或 tsc --version，输出版本号即安装成功（示例：Version 5.1.6）。

3.6.2 tsc 核心参数

tsc 支持多种参数调整编译行为，常用参数如下表：

参数名	作用	示例命令
无参数（仅文件）	编译指定 TS 文件，生成同名 JS 文件	`tsc app.ts`（生成 app.js）
`--outFile`	将多个 TS 文件合并为单个 JS 文件	`tsc file1.ts file2.ts --outFile app.js`
`--outDir`	指定编译产物的输出目录	`tsc app.ts --outDir dist`（产物存于 dist 文件夹）
`--target`	指定输出 JS 的版本（默认 es3）	`tsc --target es2015 app.ts`（输出 ES6 代码）
`--noEmitOnError`	编译报错时，不生成 JS 产物	`tsc --noEmitOnError app.ts`
`--noEmit`	仅检查类型错误，不生成任何 JS 产物	`tsc --noEmit app.ts`
`-h`/`--help`	查看基本帮助信息	`tsc -h`
`--all`	查看完整帮助信息	`tsc --all`

3.6.3 tsc 编译错误处理

默认行为 ：即使代码存在类型错误，tsc 仍会生成 JS 产物（TS 团队认为开发者更了解代码，由开发者决定是否处理错误）。
- 示例：错误代码 let foo:number = 123; foo = 'abc'; 编译时会报错，但仍生成 app.js（内容为 var foo = 123; foo = 'abc';）。
自定义行为 ：
1. 报错不生成产物：使用 --noEmitOnError 参数。
2. 仅检查不生成产物：使用 --noEmit 参数（仅做类型校验，无输出）。

3.7 编译配置：tsconfig.json

当 tsc 参数较多时，可将所有编译配置写入 tsconfig.json 文件，tsc 运行时会自动读取该文件，无需在命令行重复输入参数。

3.7.1 核心作用

存储编译参数，简化 tsc 命令（直接运行 tsc 即可，无需附加参数）。
统一项目编译规则，确保团队协作时配置一致。

3.7.2 配置示例

将命令 tsc file1.ts file2.ts --outFile dist/app.js 转为 tsconfig.json 配置：

json 复制代码

{
  "files": ["file1.ts", "file2.ts"], // 指定需编译的 TS 文件
  "compilerOptions": {               // 编译参数配置
    "outFile": "dist/app.js"         // 对应 --outFile 参数
  }
}

使用方式 ：在配置文件所在目录运行 tsc，即可按配置编译。

3.8 便捷工具：ts-node 模块

ts-node 是非官方的 npm 模块，可直接运行 TS 脚本 （无需手动执行 tsc 编译），适合快速调试。

3.8.1 ts-node 安装

bash 复制代码

npm install -g ts-node

3.8.2 核心用法

直接运行 TS 脚本 ：

bash 复制代码

ts-node script.ts  # 运行 script.ts，输出结果

无需安装，临时调用 ：通过 npx 在线调用（避免全局安装）：
bash 复制代码
```
npx ts-node script.ts
```

进入 REPL 环境 ：单独运行 ts-node，进入交互式 TS 环境（逐行输入代码并执行）：

bash 复制代码

ts-node
> const twice = (x:string) => x + x;  # 输入函数
> twice('abc')                        # 调用函数，输出 'abcabc'
> .exit                               # 退出 REPL（或按 Ctrl+d）

4. 关键问题

问题 1：TypeScript 中的类型声明是必需的吗？类型推断的存在有什么实际意义？

答案：

类型声明不是必需的 。TypeScript 会在无类型声明时，根据变量初始赋值、函数返回值自动推断类型 （即类型推断）。

类型推断的实际意义包括两点：

保证 JavaScript 兼容性：所有 JS 代码可直接作为 TS 代码运行（无需添加任何类型声明），降低 TS 学习和迁移门槛；
支持项目逐步迁移：老 JS 项目转为 TS 项目时，无需一次性为所有代码添加类型，可先依赖类型推断运行，再逐步补全声明，减少改造成本。

问题 2：使用 tsc 编译器编译 TS 代码时，若存在类型错误会如何处理？如何配置才能让报错时不生成 JS 产物？

答案：

默认处理逻辑：即使代码存在类型错误，tsc 仍会正常生成 JS 产物（TS 团队设计理念是"编译器仅提示错误，由开发者决定是否处理"）。
配置报错不生成产物 ：需在 tsc 命令中添加 --noEmitOnError 参数。例如：
bash 复制代码
```
tsc --noEmitOnError app.ts  # 若 app.ts 有类型错误，不生成 app.js
```
若需长期生效，可将该参数写入 tsconfig.json 的 compilerOptions 中：
json 复制代码
```
{
  "compilerOptions": {
    "noEmitOnError": true
  }
}
```

问题 3：tsconfig.json 文件的核心作用是什么？如何通过它简化 tsc 编译命令？

答案：

核心作用：存储 tsc 编译器的所有配置参数，统一项目编译规则，避免在命令行重复输入复杂参数，同时确保团队协作时编译配置一致。
简化命令的方式 ：
1. 将命令行中的参数（如编译文件、输出路径、JS 版本）写入 tsconfig.json；
2. 例如，原命令 tsc file1.ts file2.ts --outDir dist --target es2015，对应的 tsconfig.json 配置为：
  json 复制代码
```
{
  "files": ["file1.ts", "file2.ts"],
  "compilerOptions": {
    "outDir": "dist",
    "target": "es2015"
  }
}
```
3. 配置完成后，无需在命令行输入参数，直接运行 tsc 即可，编译器会自动读取 tsconfig.json 中的配置执行编译。