TSC 完整指南：从安装到高级配置，全面了解 TypeScript 编译器 – wiki基地

TSC 完整指南：从安装到高级配置，全面了解 TypeScript 编译器

TypeScript 已经成为现代 Web 开发中不可或缺的一部分，它通过引入静态类型检查，极大地提升了大型项目的可维护性和代码质量。而 TypeScript 编译器 (TSC) 则是将 TypeScript 代码转换为浏览器或 Node.js 环境可执行的 JavaScript 代码的核心工具。本文将详细介绍 TSC 的安装、基础用法以及高级配置，帮助您全面掌握这一强大工具。

1. 什么是 TSC？

TSC（TypeScript Compiler）是 TypeScript 语言的官方编译器。它的主要职责是将后缀名为 .ts 或 .tsx 的 TypeScript 代码，根据配置规则，编译（或转译）成后缀名为 .js 或 .jsx 的 JavaScript 代码。除了转换语法，TSC 还会在编译过程中执行严格的类型检查，帮助开发者在运行前发现潜在的类型错误。

2. 安装 TSC

TSC 通常通过 Node.js 的包管理器 npm 进行安装。在安装之前，请确保您的系统已经安装了 Node.js。

2.1 局部安装 (推荐用于项目)

在每个项目中局部安装 TypeScript 是最佳实践。这确保了项目中的所有开发者都使用相同版本的 TypeScript，避免版本冲突，并使项目更具可移植性。

bash
npm install typescript --save-dev

安装完成后，您可以在项目根目录下使用 npx tsc 命令来运行局部安装的编译器。npx 是 npm 附带的一个工具，用于执行 Node.js 包中的可执行文件。

2.2 全局安装 (可选，用于一次性脚本或学习)

如果您希望在系统的任何目录下都能直接使用 tsc 命令，可以选择全局安装。这对于学习 TypeScript 或编译一些一次性脚本非常方便。

bash
npm install -g typescript

安装完成后，您可以通过运行以下命令来验证安装是否成功，并查看当前安装的 TSC 版本：

bash
tsc -v

3. 基础用法

了解 TSC 的基本用法是开始 TypeScript 开发的第一步。

3.1 编译单个 TypeScript 文件

最简单的用法是直接编译一个 TypeScript 文件。

假设您有一个名为 hello.ts 的文件：

``typescript
// hello.ts
function greet(name: string) {
console.log(Hello, ${name}!`);
}

greet(“TypeScript”);
“`

在包含 hello.ts 文件的目录下，执行以下命令：

bash
tsc hello.ts

TSC 将会在同一目录下生成一个 hello.js 文件：

javascript
// hello.js (编译后)
function greet(name) {
console.log("Hello, ".concat(name, "!"));
}
greet("TypeScript");

您可以看到 TypeScript 的类型注解 (: string) 已被移除，并根据默认的编译目标 (ES3) 转换成了纯 JavaScript 代码。

4. 使用 tsconfig.json 进行项目配置

对于任何非简单的 TypeScript 项目，使用 tsconfig.json 文件来配置编译器是必不可少的。tsconfig.json 文件位于项目的根目录，它告诉 TSC 如何编译整个项目，包括哪些文件需要编译、使用哪些编译选项等。

4.1 初始化 tsconfig.json

您可以通过以下命令在项目根目录快速生成一个包含推荐默认配置的 tsconfig.json 文件：

bash
tsc --init

执行后，会生成一个 tsconfig.json 文件，其中包含大量注释，解释了各种配置选项的作用。

4.2 tsconfig.json 的关键属性

一个典型的 tsconfig.json 文件包含以下核心属性：

• compilerOptions: 这是最重要的部分，包含了所有用于配置 TypeScript 编译器行为的选项。
• include: 一个字符串数组，指定要包含在编译过程中的文件或文件模式（glob 模式）。例如：["src/**/*.ts"]。
• exclude: 一个字符串数组，指定要从编译过程中排除的文件或文件模式。通常用于排除 node_modules、dist 等目录。
• files: 一个字符串数组，显式列出要编译的单个文件。当您只希望编译少数特定文件时使用，但在大多数项目中，更常用 include。

当 tsconfig.json 存在时，您只需在项目根目录运行 tsc 命令（不带任何文件名），TSC 就会根据 tsconfig.json 的配置来编译整个项目。

5. 高级配置 (compilerOptions 深入解析)

compilerOptions 提供了对 TypeScript 编译过程的细粒度控制。以下是一些最常用和最重要的高级配置选项：

5.1 输出目标和模块系统

• target: 指定编译输出的 ECMAScript 版本。
  • 示例: "target": "ES2020"。常见的有 ES5 (兼容性最好), ES2015 (ES6), ESNext (最新标准)。选择合适的 target 以平衡兼容性和新特性。
• module: 指定编译输出的模块系统。
  • 示例: "module": "CommonJS"。常见的有 CommonJS (Node.js), ESNext (ES Modules)。前端项目常配合打包工具使用 ESNext。

5.2 文件路径和目录管理

• outDir: 指定编译生成的 JavaScript 文件存放的目录。
  • 示例: "outDir": "./dist"。这将把所有编译后的 .js 文件输出到 dist 文件夹。
• rootDir: 指定 TypeScript 源文件的根目录。TSC 会根据 rootDir 和 outDir 的相对路径结构来生成输出文件。
  • 示例: "rootDir": "./src"。

5.3 严格性检查

TypeScript 的核心优势在于其类型系统，这些选项可以开启更严格的类型检查，提升代码质量。强烈建议新项目启用所有严格模式选项。

• strict: 启用所有严格类型检查选项。这是推荐的设置。
  • 示例: "strict": true。
• noImplicitAny: 当表达式和声明具有隐式的 any 类型时，会报错。避免 any 类型的使用可以保证更强的类型安全。
• strictNullChecks: 启用严格的 null 和 undefined 检查。这意味着 null 和 undefined 不再是所有类型的子类型，必须显式处理它们。

5.4 库和运行时环境

• lib: 指定项目中可用的运行时库声明文件。这些文件定义了 JavaScript 内置对象和宿主环境（如浏览器 DOM 或 Node.js）的类型。
  • 示例: "lib": ["ES2020", "DOM"]。

5.5 调试和声明文件

• sourceMap: 生成源映射文件 (.map 文件)。这对于调试编译后的 JavaScript 代码至关重要，它允许您在浏览器或调试器中直接查看和调试原始的 TypeScript 代码。
  • 示例: "sourceMap": true。
• declaration: 生成 TypeScript 声明文件 (.d.ts 文件)。这些文件提供了您的代码的类型信息，对于发布库或在其他 TypeScript 项目中使用您的模块非常重要。
  • 示例: "declaration": true。

5.6 模块解析和路径别名

• baseUrl: 用于解析非相对模块名的基目录。当您配置 paths 时，此选项是必需的。
• paths: 配置模块路径映射，允许您为模块创建别名，简化复杂的导入路径。在大型项目中非常有用。
  • 示例:
    json
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
    这样您就可以使用 import { someUtil } from '@utils/someFile'; 而不是 import { someUtil } from '../../utils/someFile';。

5.7 项目引用和构建模式

• composite: 启用项目引用 (Project References)。这允许您将一个大型 TypeScript 项目拆分成多个小的、相互依赖的 TypeScript 项目。这对于 monorepo 结构非常有用，可以加快增量编译速度并改善组织结构。当 composite 为 true 时，declaration 也会自动为 true。

5.8 监控模式

• watch: 在开发过程中，运行 tsc --watch 命令可以让 TSC 持续监控您的 TypeScript 文件，并在检测到文件更改时自动重新编译。这大大提升了开发效率。

6. 最佳实践

• 始终使用 tsconfig.json: 即使是小型项目，也应该配置 tsconfig.json 以明确编译器的行为。
• 启用 strict: true: 从项目一开始就启用所有严格检查选项，有助于编写更健壮、更少错误的代码。
• 局部安装 TypeScript: 确保项目的构建环境一致性。
• 理解 target 和 module: 根据您的目标运行环境和打包工具选择最合适的输出目标和模块系统。
• 利用 outDir 和 rootDir: 保持源文件和编译输出文件的整洁分离。
• 生成 sourceMap: 对于所有开发环境，生成 sourceMap 是调试的关键。
• 考虑 declaration: 如果您正在构建一个库或需要在多个 TypeScript 项目中共享代码，生成 .d.ts 文件至关重要。

7. 总结

TypeScript 编译器 (TSC) 是 TypeScript 生态系统的核心。通过本文的介绍，您应该已经对 TSC 的安装、基础用法以及 tsconfig.json 中的各种高级配置有了全面的了解。熟练掌握这些配置，您将能够更有效地管理 TypeScript 项目，提高开发效率，并构建出更稳定、更易维护的应用程序。建议您查阅 TypeScript 官方文档以获取更详细和最新的配置信息，并根据项目的具体需求灵活运用这些选项。