C31. TypeScript 环境配置

C31. 安装 TypeScript Compiler (TSC)

TypeScript 的核心工具是 TypeScript 编译器（TSC），它将 TypeScript（.ts）代码转换为 JavaScript（.js）。安装 TSC 需要 Node.js 环境。

1.1 安装 Node.js

先决条件：确保已安装 Node.js（包含 npm 包管理器）。 验证安装：

node -v  # 显示版本号（如 v18.16.0）
npm -v   # 显示 npm 版本号

1.2 全局安装 TSC

使用 npm 全局安装 TypeScript 编译器：

npm install -g typescript  # 注意：安装包名是 `typescript`，而非 `tsc`

1.3 验证安装

安装完成后，检查 TSC 是否可用：

tsc -v  # 显示 TypeScript 版本（如 5.1.6）

WARNING

若提示 tsc: command not found，请检查：

1. 是否以管理员权限运行命令（Windows 需右键“以管理员身份运行”）。
2. 环境变量 PATH 是否包含 Node.js 和 npm 的安装路径。

C32. 通过命令行将 TypeScript 编译成 JavaScript

通过 TSC 命令行工具将 .ts 文件编译为 .js 文件。

2.1 编译单个文件

基础语法：

tsc yourfile.ts

生成同名 .js 文件（如 yourfile.js）。

示例代码：

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

编译并运行：

tsc hello.ts
node hello.js  # 输出 "Hello, TypeScript!"

2.2 常用命令选项

选项	作用
--watch	实时监听文件变化，自动重新编译
--outDir	指定输出目录（如 --outDir dist）
--noEmit	仅检查错误，不生成 .js 文件

示例：

tsc --watch --outDir build  # 监听并输出到 build 文件夹

C33. 通过 tsconfig.json 配置 TypeScript 行为

tsconfig.json 是 TypeScript 项目的配置文件，定义编译规则和项目范围。

3.1 创建配置文件

在项目根目录运行：

tsc --init  # 生成默认的 tsconfig.json

3.2 配置文件核心选项

{
  "compilerOptions": {
    "target": "ESNext",       // 输出的 JavaScript 版本（如 "ES2020"）
    "module": "ESNext",       // 模块系统（如 "CommonJS"）
    "outDir": "./dist",       // 输出目录
    "rootDir": "./src",       // 源代码根目录
    "strict": true,           // 启用所有严格类型检查
    "esModuleInterop": true   // 允许 CommonJS 和 ES 模块互操作
  },
  "include": ["src/**/*"],    // 需要编译的文件路径
  "exclude": ["node_modules"] // 排除的文件/文件夹
}

INFO

• strict：开启严格类型检查（如非空检查、类型守卫）。
• moduleResolution：控制模块解析策略（默认 Node）。

3.3 配置文件示例

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node"
  },
  "include": ["src/*.ts"]
}

知识回顾

1. 安装 TSC
   1. 先决条件：安装 Node.js 和 npm。
   2. 全局安装命令：npm install -g typescript。
   3. 验证：tsc -v。
2. 命令行编译
   1. 基础编译：tsc yourfile.ts。
   2. 常用选项：--watch、--outDir、--noEmit。
3. tsconfig.json 配置
   1. 通过 tsc --init 生成配置文件。
   2. 核心选项：
      • target：JavaScript 版本。
      • module：模块系统类型。
      • strict：严格类型检查。
   3. include/exclude 定义编译范围。

课后练习

1. 单选题：以下哪个命令用于生成 TypeScript 配置文件？

   • A. tsc init
   • B. tsc --init
   • C. npm init ts
   • D. tsc config

2. 填空题：在 tsconfig.json 中，设置输出目录为 build 的配置项是 ______。

3. 操作题：

   1. 安装 TypeScript 并验证版本。
   2. 编写一个 TypeScript 文件，使用 --outDir 将输出文件存入 dist 目录。
   3. 创建 tsconfig.json，配置 target 为 ES5，并排除 test/ 目录。