运行 TypeScript 代码#

使用 TypeScript 编写的代码需要先被编译成 JavaScript,然后才能在 Node.js 环境中运行。

方式 1：tsc 先编译再执行#

步骤 1：使用 tsc 编译 TypeScript 文件

首先,使用 TypeScript 编译器 tsc 将 .ts 文件编译成 .js 文件。

1tsc test.ts

这将生成一个 test.js 文件,其中包含了 test.ts 的 JavaScript 等价代码。

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

使用 Node.js 运行编译后的 .js 文件。

1node test.js

这样,你就可以在 Node.js 环境中执行编译后的 TypeScript 代码了。

方式 2：ts-node 直接执行#

如果你希望直接运行 TypeScript 代码而无需手动编译,可以使用 ts-node,这是一个 TypeScript 执行环境和编译器,可以让你直接执行 .ts 文件。

步骤 1：安装 ts-node

首先,将 ts-node 安装为项目的开发依赖。

1pnpm add -D ts-node

步骤 2：创建 tsconfig.json

ts-node 依赖于 tsconfig.json 文件来了解如何编译 TypeScript 代码。如果尚未创建此文件,可以通过以下命令初始化：

1tsc -init

这将生成一个默认的 tsconfig.json 文件,你可以根据需要进一步配置它。

步骤 3：直接运行 TypeScript 文件

现在,你可以使用 ts-node 直接执行 .ts 文件,无需先将其编译为 .js。

1ts-node test.ts

这种方法简化了开发流程,因为你可以直接运行 TypeScript 文件,非常适合快速开发和测试。

方式 3：Code Runner 直接执行#

步骤 1：安装 Code Runner 插件

在 VSCode 中,打开插件市场,搜索并安装 Code Runner 插件。这个插件允许你直接在编辑器中运行多种语言的代码,包括 JavaScript 和 TypeScript。如果是 js 文件,内部会直接采用 node 来执行此文件；如果是 ts 文件,需要通过 ts-node 直接来执行。

步骤 2：全局安装 ts-node

由于 Code Runner 插件在执行 TypeScript 文件时依赖于 ts-node,你需要确保 ts-node 已全局安装。

1npm install ts-node -g

步骤 3：初始化 tsconfig.json

为了确保 TypeScript 代码能够正确编译,你需要初始化 tsconfig.json 文件。

1tsc -init

步骤 4：直接运行 TypeScript 文件

安装好 Code Runner 插件并配置好 ts-node 后,你可以直接在 VSCode 中右键点击代码文件,选择 Run Code 来执行当前打开的 .ts 或 .js 文件。

方式 4：先构建再运行#

步骤1：安装依赖

首先,你需要安装 Rollup 以及相关的插件作为开发依赖。

1pnpm add -D rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve

步骤2：修改 package.json

在你的 package.json 文件中,添加一个构建脚本。

这里 -c 表示使用配置文件,-w 表示监听文件变化。

1{
2	"name": "learn-typescript",
3	"version": "1.0.0",
4	"description": "",
5	"main": "./src/index.ts",
6	"type": "module",
7	"scripts": {
8		"build": "rollup -c -w"
9	},
10	"keywords": [],
11	"author": "",
12	"license": "ISC",
13	"devDependencies": {
14		"@rollup/plugin-node-resolve": "^15.3.0",
15		"rollup": "^4.28.1",
16		"rollup-plugin-typescript2": "^0.36.0",
17		"typescript": "^5.7.2"
18	}
19}

步骤3：修改 tsconfig.json

确保你的 tsconfig.json 文件配置正确,以便 Rollup 可以正确识别 TypeScript 代码。

1{
2  "compilerOptions": {
3    "module": "ESNext",
4  	"sourceMap": true,
5  }
6}

步骤4：根目录下新建 rollup.config.js 文件

在项目根目录下新建一个 rollup.config.js 文件,配置 Rollup 的打包选项。

1import typescript from "rollup-plugin-typescript2"
2import { nodeResolve } from "@rollup/plugin-node-resolve"
3import path from "node:path"
4import { fileURLToPath } from "node:url"
5
6// 当前文件的绝对路径
7const _filename = fileURLToPath(import.meta.url)
8// 当前文件所在的文件夹目录（绝对路径）
9const _dirname = path.dirname(_filename)
10
11export default {
12	input: "src/index.ts", // 项目入口
13	output: {
14		file: path.resolve(_dirname, "dist/bundle.js"),
15		format: "iife",
16		sourcemap: true,
17	},
18	plugins: [
19		nodeResolve({
20			extensions: [".js", ".ts"],
21		}),
22		typescript({
23			tsconfig: path.resolve(_dirname, "tsconfig.json"),
24		}),
25	],
26}

步骤 5：构建项目

使用以下命令启动构建过程。

1pnpm build

构建完成后,你可以在 dist 目录下找到打包好的 bundle.js 文件,并使用 Node.js 执行它。

1node dist/bundle.js