当前位置：首页 > news >正文

TypeScript 环境搭建

news 来源：原创 2025/5/13 18:36:54

Typescript环境支持有很多种选择，可以基于babel、也可以基于tsc，或者直接使用swc，如果是使用webpack，我们可以借助 ts-loader。

通常用两种模式进行Typescript编译，tsc和babel。

1. 基于TypeScript CLI 的环境搭建

tsc是Typescript库提供的命令行工具，使用tsc命令可以将ts文件编译输出为js，并能根据类型定义，输出类型定义文件。

TypeScript提供了官方的命令行工具tsc，用于编译TypeScript 代码。

以下是详细的搭建步骤：

1.1. 安装 TypeScript

首先，在项目目录下初始化一个新的npm项目并安装TypeScript：

mkdir my-ts-project
cd my-ts-project
npm init -y
npm install typescript --save-dev

1.2. 创建 tsconfig.json 文件

tsconfig.json 文件用于配置 TypeScript 编译选项。在项目根目录下创建 tsconfig.json 文件，并添加以下内容：

{"compileroptions":{"target":"ES6","module":"commonjs","strict": true,"esModuleInterop": true,"outDir":"./dist"},"include": ["src /**/*"],"exclude": ["node modules"]
}

1.3. 创建TypeScript 源文件

在项目根目录下创建 src 目录，并在其中添加一个示例 TypeScript 文件 index.ts：

// src/index.ts
const message:string="Hello, Typescript!";
console.log(message);

1.4. 编译Typescript 代码

在 package.json 文件中添加一个脚本来编译 TypeScript 代码：

{"scripts": {"build":"tsc"}
}

运行以下命令来编译 TypeScript 代码：

pnpm build

编译后的 JavaScript 文件将输出到 dist 目录中。

2. 基于 Babel 的环境搭建

Babel 是一个 JavaScript 编译器，可以将 TypeScript 编译为 JavaScript。

2.1. 安装必要的依赖

首先，在项目目录下初始化一个新的 npm 项目并安装 Babel 和 TypeScript 相关的依赖：

mkdir my-babel-ts-project
cd my-babel-ts-project
npm init -y
npm install @babel/core @babel/cli @babel/preset-env @babel/preset-typescript --save-dev

2.2. 创建 Babel 配置文件

在项目根目录下创建.babelrc 文件，并添加以下内容：

{"presets": ["@babel/preset-env","@babel/preset-typescript"]
}

2.3. 创建 TypeScript 源文件

在项目根目录下创建src目录，并在其中添加一个示例TypeScript文件index.ts：

// src/index.ts
const message: string = "Hello, Babel and TypeScript!";
console.log(message);

2.4. 编译 TypeScript 代码

在 package.json 文件中添加一个脚本来使用 Babel 编译 TypeScript 代码：

{"scripts": {"build": "babel src --out-dir dist --extensions '.ts'"}
}

运行以下命令来编译 TypeScript 代码：

npm run build

编译后的 JavaScript 文件将输出到 dist 目录中。

通过上述步骤，可以分别基于 TypeScript CLI 和 Babel 搭建 TypeScript 的开发环境。两种方法各有优劣，TypeScript CLI 更加直接和官方支持，而 Babe| 可以更灵活地与现有的 Babel 工具链集成。选择哪种方法取决于具体的项目需求和开发者的偏好。