Hello World，我的第一个TypeScript代码

常铭
106 阅读3分钟

在 VS Code 中创建并运行一个 TypeScript 的 “Hello World” 程序，主要分为安装环境、创建文件和运行代码三个步骤。下面是为你梳理的具体操作流程。

第一步：准备工作（安装必要环境）

在开始之前，请确保你的电脑上已安装好以下两个基础工具：

  1. Node.js：这是运行 JavaScript 和安装包管理工具 npm 的基础。请前往 Node.js 官网 下载并安装 LTS（长期支持）版本。

  2. TypeScript 编译器：打开系统的终端（或 VS Code 的内置终端），输入以下命令进行全局安装：

    bash

    npm install -g typescript

    安装完成后，可以通过输入 tsc --version 来验证是否成功，如果显示出版本号则说明安装正确。

第二步：创建项目与文件

  1. 新建项目文件夹：在你的电脑上创建一个专门用于此项目的文件夹，例如 my_ts_project。

  2. 用 VS Code 打开文件夹：启动 VS Code，通过菜单栏的 文件 -> 打开文件夹... 选择你刚创建的文件夹。

  3. 初始化 TypeScript 配置：在 VS Code 中，使用快捷键 Ctrl + ` （反引号键）打开终端，然后运行命令生成配置文件：

    bash

    tsc --init

    这会在你的文件夹中创建一个 tsconfig.json 文件，它定义了 TypeScript 如何编译。

  4. 创建并编写 .ts 文件：在 VS Code 左侧的资源管理器中，右键点击空白处，选择“新建文件”。将文件命名为 hello.ts。然后，输入以下代码：

    typescript

    const greeting: string = 'Hello, World!';
console.log(greeting);

    操作提示：当你在 .ts 文件中输入代码时，VS Code 会自动提供语法高亮和智能提示，这是因为它内置了对 TypeScript 的基本支持。

第三步：编译并运行代码

你有两种简单的方法来运行这个程序：

方法一：手动编译运行（推荐初学者理解过程）

这是最基础的方法，能让你清楚看到 TypeScript 被编译成 JavaScript 的过程。

  1. 编译：在终端中，运行以下命令，将 .ts 文件编译为 .js 文件：

    bash

    tsc hello.ts

    成功后，你会在文件夹中看到一个新生成的 hello.js 文件。

  2. 运行：接着，在终端中输入以下命令来执行生成的 JavaScript 文件：

    bash

    node hello.js

    如果一切顺利，终端就会打印出 Hello, World! 。

image.png

方法二：使用工具直接运行（更便捷）

如果你想跳过手动编译的步骤，可以使用 ts-node 工具，它可以直接运行 TypeScript 文件。

  1. 安装 ts-node：在终端中运行以下命令：

    bash

    npm install -g ts-node

  2. 直接运行：安装完成后，你就可以在终端中直接运行 .ts 文件了：

    bash

    ts-node hello.ts

    终端同样会输出 Hello, World! 。

注：熟悉基本流程后，你可以通过配置 tsconfig.json 文件（例如设置 outDir 来指定编译输出目录），或使用 VS Code 的“任务”功能来实现更自动化的编译流程。

方法三：使用npx esno 命令

image.png

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

avatar
文章
阅读
粉丝