TypeScript Compiler (TSC) 简介与使用指南 – wiki基地

作者： /

TypeScript Compiler (TSC) 简介与使用指南

1. 简介：TypeScript 及其编译器 (TSC)

TypeScript 是由微软开发并维护的一种开源编程语言。它是 JavaScript 的一个超集，这意味着任何合法的 JavaScript 代码也都是合法的 TypeScript 代码。TypeScript 最大的特点是引入了静态类型系统，这在 JavaScript 这样动态类型的语言中是一个重要的补充。

TypeScript Compiler (TSC) 是 TypeScript 的核心工具，负责将 TypeScript 代码（.ts 或 .tsx 文件）转换（或称“编译”）为纯 JavaScript 代码。由于浏览器或其他 JavaScript 运行环境（如 Node.js）无法直接执行 TypeScript 代码，TSC 的作用至关重要，它充当了 TypeScript 和运行时环境之间的桥梁。

2. 为什么要使用 TypeScript？

使用 TypeScript 带来的主要优势包括：

  • 类型安全：在开发阶段捕获类型相关的错误，减少运行时错误。
  • 代码可读性与可维护性：清晰的类型定义使代码更易于理解和重构，尤其对于大型项目和多人协作开发。
  • 更好的开发体验：IDE（如 VS Code）能够提供更智能的代码补全、导航和重构功能。
  • 最新的 JavaScript 特性：TypeScript 支持 ES6+ 的所有新特性，并能将其编译为兼容旧环境的 JavaScript 代码。
  • 提升团队协作效率：统一的类型约定有助于团队成员更好地理解和使用彼此的代码。

3. 安装 TypeScript

TSC 作为 TypeScript 包的一部分，可以通过 npm (Node Package Manager) 进行安装。

“`bash

全局安装 TypeScript

npm install -g typescript

或者，作为项目依赖安装（推荐）

npm install –save-dev typescript
“`

全局安装后，你可以在任何地方直接使用 tsc 命令。作为项目依赖安装后，通常会在 package.json 的 scripts 中配置 tsc 命令，或者使用 npx tsc。

安装完成后，你可以通过以下命令检查 TSC 的版本：

bash
tsc -v

4. TSC 的基本使用

4.1 编译单个文件

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

“`typescript
// hello.ts
function greet(person: string) {
return “Hello, ” + person;
}

let user = “World”;
console.log(greet(user));
“`

要编译这个文件，只需运行：

bash
tsc hello.ts

TSC 会在同一目录下生成一个名为 hello.js 的 JavaScript 文件：

javascript
// hello.js
function greet(person) {
return "Hello, " + person;
}
var user = "World";
console.log(greet(user));

4.2 编译多个文件

你可以一次性编译多个 TypeScript 文件：

bash
tsc file1.ts file2.ts

或者，如果你想编译一个项目中的所有 .ts 文件，而这些文件之间存在依赖关系，通常需要使用 tsconfig.json。

5. 使用 tsconfig.json 配置项目

对于任何非琐碎的 TypeScript 项目，强烈建议使用 tsconfig.json 文件。这个文件位于项目的根目录，用于配置 TSC 如何编译项目中的文件。

要生成一个默认的 tsconfig.json 文件，可以在项目根目录运行：

bash
tsc --init

这会创建一个包含大量注释的 tsconfig.json 文件。让我们来看一些关键配置项。

5.1 核心 compilerOptions

compilerOptions 是 tsconfig.json 中最重要的部分，它定义了 TSC 的编译行为。

  • target: 指定编译后的 JavaScript 版本。例如，"ES5" 会将 TypeScript 编译为 ES5 兼容的 JavaScript；"ES2016" 或 "ESNext" 则会使用更现代的特性。
    json
    "target": "ES2016",
  • module: 指定生成的 JavaScript 代码的模块系统。例如，"CommonJS" 适用于 Node.js 环境，"ESNext" 适用于支持 ES 模块的现代浏览器和打包工具。
    json
    "module": "ESNext",
  • outDir: 指定编译输出的 JavaScript 文件目录。
    json
    "outDir": "./dist",
  • rootDir: 指定 TypeScript 源代码的根目录。TSC 会根据 rootDir 和 outDir 保持目录结构。
    json
    "rootDir": "./src",
  • strict: 开启所有严格的类型检查选项。强烈建议在所有新项目中使用 true。
    json
    "strict": true,
  • esModuleInterop: 启用非 ES 模块之间（如 CommonJS 和 ES 模块）的互操作性。解决在 CommonJS/AMD 模块中导入 ES 模块的兼容性问题。
    json
    "esModuleInterop": true,
  • forceConsistentCasingInFileNames: 强制文件名大小写一致。
    json
    "forceConsistentCasingInFileNames": true,
  • skipLibCheck: 跳过声明文件的类型检查，可以加快编译速度，尤其是在大型项目中。
    json
    "skipLibCheck": true,
  • declaration: 生成相应的 .d.ts 声明文件。这对于发布库非常有用。
    json
    "declaration": true,
  • sourceMap: 生成源映射文件（.map），便于调试编译后的 JavaScript 代码。
    json
    "sourceMap": true,
  • jsx: 指定 JSX 语法如何被处理。例如，"react"、"preserve"、"react-jsx"。
    json
    "jsx": "react",

5.2 include, exclude 和 files

除了 compilerOptions，tsconfig.json 还可以通过 include, exclude 和 files 来指定哪些文件应该被 TSC 编译。

  • include: 一个文件路径或 glob 模式数组，匹配到的文件会被包含在编译中。
    json
    "include": [
    "src/**/*.ts",
    "src/**/*.d.ts"
    ]
  • exclude: 一个文件路径或 glob 模式数组，匹配到的文件会被排除在编译之外。默认情况下会排除 node_modules 和 bower_components 目录。
    json
    "exclude": [
    "node_modules",
    "dist"
    ]
  • files: 一个明确指定文件路径的数组，这些文件会被包含在编译中。通常用于小型项目或特殊情况，不建议用于大型项目。

当你有了 tsconfig.json 文件后，只需在项目根目录运行 tsc 命令（不带任何文件名参数），TSC 就会自动查找并使用 tsconfig.json 来编译整个项目。

6. 监控文件变化 (Watch Mode)

在开发过程中，你可能希望 TSC 自动重新编译你所做的更改。TSC 提供了“watch”模式来实现这一点：

“`bash
tsc –watch

或者简写

tsc -w
“`

TSC 会监听 tsconfig.json 中指定的所有 TypeScript 文件，一旦文件发生变化，就会自动重新编译。

7. 目录结构示例

一个典型的 TypeScript 项目目录结构可能如下：

my-ts-project/
├── node_modules/
├── src/
│ ├── index.ts
│ ├── components/
│ │ └── button.ts
│ └── utils/
│ └── helpers.ts
├── dist/ (编译输出目录，由 outDir 指定)
│ ├── index.js
│ ├── index.js.map
│ ├── components/
│ │ └── button.js
│ ├── utils/
│ │ └── helpers.js
├── tsconfig.json
├── package.json
└── README.md

8. 与构建工具集成

虽然 TSC 可以独立工作，但在现代前端或后端项目中，通常会将其与模块打包工具（如 Webpack, Rollup, Parcel, Vite）或任务运行器（如 Gulp）结合使用。这些工具通常会使用 ts-loader 或 rollup-plugin-typescript2 等插件，在它们的构建流程中调用 TSC 来处理 TypeScript 文件，从而实现更强大的功能，如代码拆分、热模块替换 (HMR) 等。

例如，在一个使用 Webpack 的项目中，你会安装 typescript 和 ts-loader，然后在 webpack.config.js 中配置它：

javascript
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
// ...
};

9. 结论

TypeScript Compiler (TSC) 是 TypeScript 生态系统的心脏，它使得将类型化的 TypeScript 代码转换为可运行的 JavaScript 成为可能。通过 tsconfig.json，开发者可以精细地控制编译过程，满足从小型脚本到大型企业级应用的各种需求。掌握 TSC 的使用是成为一名高效 TypeScript 开发者的基础。

滚动至顶部