在 VS Code 中创建并运行一个 TypeScript 的 "Hello World" 程序,主要分为安装环境、创建文件和运行代码三个步骤。下面是为你梳理的具体操作流程。
第一步:准备工作(安装必要环境)
在开始之前,请确保你的电脑上已安装好以下两个基础工具:
-
Node.js :这是运行 JavaScript 和安装包管理工具
npm的基础。请前往 Node.js 官网 下载并安装 LTS(长期支持)版本。 -
TypeScript 编译器 :打开系统的终端(或 VS Code 的内置终端),输入以下命令进行全局安装:
bash
npm install -g typescript
第二步:创建项目与文件
-
新建项目文件夹 :在你的电脑上创建一个专门用于此项目的文件夹,例如
my_ts_project。 -
用 VS Code 打开文件夹 :启动 VS Code,通过菜单栏的
文件->打开文件夹...选择你刚创建的文件夹。 -
初始化 TypeScript 配置 :在 VS Code 中,使用快捷键 Ctrl + ` (反引号键)打开终端,然后运行命令生成配置文件:
bash
csharptsc --init这会在你的文件夹中创建一个
tsconfig.json文件,它定义了 TypeScript 如何编译。 -
创建并编写
.ts文件 :在 VS Code 左侧的资源管理器中,右键点击空白处,选择"新建文件"。将文件命名为hello.ts。然后,输入以下代码:typescript
iniconst greeting: string = 'Hello, World!'; console.log(greeting);操作提示 :当你在
.ts文件中输入代码时,VS Code 会自动提供语法高亮和智能提示,这是因为它内置了对 TypeScript 的基本支持。
第三步:编译并运行代码
你有两种简单的方法来运行这个程序:
方法一:手动编译运行(推荐初学者理解过程)
这是最基础的方法,能让你清楚看到 TypeScript 被编译成 JavaScript 的过程。
-
编译 :在终端中,运行以下命令,将
.ts文件编译为.js文件:bash
tsc hello.ts -
运行 :接着,在终端中输入以下命令来执行生成的 JavaScript 文件:
bash
node hello.js如果一切顺利,终端就会打印出 Hello, World! 。

方法二:使用工具直接运行(更便捷)
如果你想跳过手动编译的步骤,可以使用 ts-node 工具,它可以直接运行 TypeScript 文件。
-
bash
npm install -g ts-node -
直接运行 :安装完成后,你就可以在终端中直接运行
.ts文件了:bash
ts-node hello.ts终端同样会输出 Hello, World! 。
注:熟悉基本流程后,你可以通过配置
tsconfig.json文件(例如设置outDir来指定编译输出目录),或使用 VS Code 的"任务"功能来实现更自动化的编译流程。
方法三:使用npx esno 命令

简单地说,esno 也是先编译再执行的过程,只不过它底层使用的是快如闪电的 ESBuild 进行编译,所以使用它来执行 TS 文件,我们几乎感觉不到编译的过程。