Hello World,我的第一个TypeScript代码

在 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

    csharp 复制代码
    tsc --init

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

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

    typescript

    ini 复制代码
    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!

方法二:使用工具直接运行(更便捷)

如果你想跳过手动编译的步骤,可以使用 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 命令

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

相关推荐
QQ1__8115175155 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态5 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子5 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室5 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI5 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing5 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者5 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册5 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李5 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢5 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web