TypeScript 编译：tsc 命令与 tsconfig.json

TypeScript 编译器 (tsc) 是将 TypeScript 代码转换为可执行 JavaScript 代码的核心工具。通过配置 tsconfig.json，你可以精确控制代码的编译方式、输出目录以及语法检查的严格程度。以下指南将带你从零开始掌握 tsc 命令的使用与配置文件的编写。

基础编译：直接使用 tsc 命令

在没有配置文件的情况下，tsc 也能完成基本的编译工作。

1. 确保 全局安装了 TypeScript，或在当前项目中已将其作为开发依赖安装。
   在终端中 输入 以下命令检查版本：

   tsc -v

2. 创建 一个名为 demo.ts 的文件，并 写入 以下代码：

   const message: string = "Hello TypeScript";
   console.log(message);

3. 执行 编译命令，将 .ts 文件转换为 .js 文件：

   tsc demo.ts

4. 查看 当前目录，你会发现生成了一个同名的 demo.js 文件。此时，编译过程使用的是默认配置（如 ES3 语法标准，输出到当前目录）。

初始化配置：生成 tsconfig.json

当项目变得复杂，涉及多个文件或需要特定的编译目标时，手动输入大量参数会非常繁琐。tsconfig.json 用于定义项目的根目录和编译选项。

1. 在 项目根目录下，打开 终端。

2. 运行 初始化命令：

   tsc --init

3. 观察 目录结构，此时会生成一个带有详细注释的 tsconfig.json 文件。

4. 编辑 该文件，删除 大部分默认注释，仅保留核心配置以便理解：

   {
     "compilerOptions": {
       "target": "es2016",
       "module": "commonjs",
       "outDir": "./dist",
       "rootDir": "./src",
       "strict": true
     }
   }

核心配置选项详解

理解 compilerOptions 中的常用字段是高效使用 TypeScript 的关键。

1. 创建 一个 src 文件夹。

2. 移动 之前的 demo.ts 文件到 src 目录下。

3. 修改 tsconfig.json，设置 outDir 为 "./dist"，rootDir 为 "./src"。

4. 运行 编译命令，此时无需指定文件名：

   tsc

5. 检查 项目目录，你会看到 dist 文件夹被自动创建，其中包含了编译后的 demo.js。

进阶控制：包含与排除文件

在大型项目中，你可能只想编译部分代码，或者忽略测试文件。tsconfig.json 提供了 include 和 exclude 字段来过滤文件。

1. 打开 tsconfig.json 文件。

2. 添加 include 字件匹配规则，指定 需要编译的文件：

   {
     "compilerOptions": {
       "target": "es2016",
       "module": "commonjs",
       "outDir": "./dist"
     },
     "include": ["src/**/*"]
   }

3. 添加 exclude 字段，排除 不需要编译的文件或目录（例如 node_modules 或测试文件）：

   {
     "compilerOptions": {
       "target": "es2016",
       "module": "commonjs",
       "outDir": "./dist"
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules", "**/*.spec.ts"]
   }

   *注：**/* 表示匹配任意子目录下的任意文件。*

自动化编译：监视模式

在开发过程中，每次修改代码后手动运行 tsc 非常低效。使用监视模式可以让编译器在文件发生变化时自动重新编译。

1. 启动 监视模式：

   tsc --watch

2. 观察 终端输出，屏幕会显示 Watching for file changes.。

3. 修改 src/demo.ts 中的代码，例如 改变 变量值：

   const message: string = "Hello Watching Mode";
   console.log(message);

4. 保存 文件。终端会自动检测到变化并立即触发重新编译，更新 dist 目录下的 JS 文件。

5. 退出 监视模式，按下 Ctrl + C。

编译流程概览

TypeScript 的编译过程是由 tsc 读取配置、定位文件、类型检查并最终输出代码的过程。以下是核心工作流的逻辑示意：

1. 当你 执行 tsc 命令时，编译器首先 寻找 当前目录下的 tsconfig.json。

2. 找到配置文件后，编译器 解析 compilerOptions 中的各项参数（如 target、module）。

3. 编译器根据 include 和 exclude 规则，锁定 所有需要处理的 .ts 文件。

4. 编译器对代码进行类型检查。如果 strict 模式开启且代码存在类型错误，则 报告 错误并停止生成 JS 文件（取决于 noEmitOnError 设置）。

5. 如果类型检查通过，编译器将 TypeScript 代码转换为指定的 JavaScript 代码，并 输出 到 outDir 指定的目录中。