TypeScript 开发环境搭建

Node.js 安装

TypeScript 需要 Node.js 环境来运行，因此首先需要安装 Node.js。

步骤 1：下载 Node.js

1. 访问 Node.js 官网
2. 下载适合你操作系统的 LTS（长期支持）版本
3. 运行安装程序，按照提示完成安装

步骤 2：验证 Node.js 安装

打开命令行工具（Windows 上是 cmd 或 PowerShell，Mac/Linux 上是终端），运行以下命令：

node -v
npm -v

如果显示版本号，则说明 Node.js 安装成功。

全局安装 TypeScript

使用 npm 全局安装 TypeScript：

npm install -g typescript

验证 TypeScript 安装

运行以下命令验证 TypeScript 是否安装成功：

tsc --version

如果显示 TypeScript 的版本号，则说明安装成功。

第一个 TS 文件运行

步骤 1：创建 TypeScript 文件

创建一个名为 hello.ts 的文件，内容如下：

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

sayHello("TypeScript");

步骤 2：编译 TypeScript 文件

在命令行中，进入文件所在目录，运行以下命令编译 TypeScript 文件：

tsc hello.ts

这会生成一个名为 hello.js 的 JavaScript 文件。

步骤 3：运行编译后的 JavaScript 文件

node hello.js

你应该会看到输出：

Hello, TypeScript!

TS 编译流程

TypeScript 的编译流程如下：

1. 编写 TypeScript 代码（.ts 文件）
2. 使用 tsc 命令编译（生成 .js 文件）
3. 运行 JavaScript 文件（使用 node 或在浏览器中运行）

tsc 命令的常用选项

选项	描述	示例
--target	指定编译目标 ECMAScript 版本	tsc --target es2015 hello.ts
--outDir	指定输出目录	tsc --outDir dist hello.ts
--watch	监听文件变化，自动重新编译	tsc --watch hello.ts
--strict	启用所有严格类型检查选项	tsc --strict hello.ts
--noEmit	只进行类型检查，不生成输出文件	tsc --noEmit hello.ts

tsconfig.json 配置文件

对于较大的项目，我们通常使用 tsconfig.json 文件来配置 TypeScript 编译选项。

创建 tsconfig.json 文件

在项目根目录中创建一个 tsconfig.json 文件，内容如下：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

常用配置项说明

• target：编译目标 ECMAScript 版本
• module：模块系统
• outDir：编译输出目录
• strict：启用所有严格类型检查
• esModuleInterop：启用 ES 模块互操作性
• include：包含的文件
• exclude：排除的文件

使用 tsconfig.json 编译

在项目根目录运行：

tsc

这会根据 tsconfig.json 中的配置编译项目。

TS 与 JS 互操作

在 TypeScript 中使用 JavaScript 文件

TypeScript 可以直接引用 JavaScript 文件，无需额外配置。

示例：

// utils.js
function add(a, b) {
  return a + b;
}

module.exports = { add };

// app.ts
import { add } from './utils';

console.log(add(1, 2)); // 3

在 JavaScript 中使用 TypeScript 文件

JavaScript 文件不能直接引用 TypeScript 文件，需要先将 TypeScript 文件编译为 JavaScript 文件。

JS 项目接入 TS 的步骤

1. 安装 TypeScript：npm install -g typescript
2. 创建 tsconfig.json：配置 TypeScript 编译选项
3. 重命名 .js 文件为 .ts：逐步将 JavaScript 文件转换为 TypeScript 文件
4. 添加类型注解：为变量、函数等添加类型注解
5. 编译并测试：确保代码能正常编译和运行

开发工具推荐

IDE 推荐

1. Visual Studio Code：微软开发的轻量级 IDE，对 TypeScript 有很好的支持
2. WebStorm：JetBrains 开发的专业 IDE，对 TypeScript 有完善的支持

VS Code 插件推荐

1. TypeScript Language Features：VS Code 内置的 TypeScript 支持
2. ESLint：代码质量检查
3. Prettier：代码格式化
4. Path Intellisense：路径自动补全

小结

本章节介绍了 TypeScript 的开发环境搭建，包括：

• Node.js 的安装和验证
• TypeScript 的全局安装和验证
• 创建和运行第一个 TypeScript 文件
• TypeScript 的编译流程和常用编译选项
• tsconfig.json 配置文件的创建和使用
• TypeScript 与 JavaScript 的互操作
• 开发工具推荐

现在你已经完成了 TypeScript 开发环境的搭建，接下来可以开始学习 TypeScript 的基础类型了。