快速入门

发布于 2026-07-26

Hello World

TypeScript 的 Hello World 示例

TypeScript 是什么

TypeScript 是 JavaScript 的超集。浏览器通常不直接运行完整的 TypeScript 代码,需要先将 TypeScript 编译成 JavaScript,流程如下:

hello.ts
   │
   │ tsc
   ▼
hello.js
   │
   │ Node.js
   ▼
程序输出

先决条件

安装:

  • Node.js,用来运行 TypeScript 编译器,以及执行编译生成的 JavaScript。
  • 文本编辑器,如:Visual Studio Code

确保如下命令执行正常:

node --version
npm --version

创建项目目录

依次执行:

# 1
mkdir ts-hello-world
 
# 2
cd ts-hello-world
 
# 3 会生成 package.json 文件
npm init -y

安装项目级 typescript

npm install --save-dev typescript
# or
npm install -D typescript
 
# 检查版本
npx tsc --version
  • typescript 是 npm 包名,安装后可以在项目中使用 tsc 命令;
  • tsc 是 TypeScript 编译器,用来将 TypeScript 代码编译成 JavaScript 代码;
  • npx 用于执行 npm 包,这里用于执行 typescript 编译器。

编写 TypeScript 文件

在项目目录下创建 hello.ts 文件,内容如下:

const message: string = "Hello, TypeScript!";
 
console.log(message);

编译为 JavaScript

npx tsc hello.ts

会生成 hello.js,

运行 JavaScript 文件

node hello.js

会输出:

Hello, TypeScript!

类型检查

将代码改为

const message: string = 123;
 
console.log(message);

重新执行

npx tsc hello.ts

提示错误:

hello.ts:1:7 - error TS2322: Type 'number' is not assignable to type 'string'.
 
1 const message: string = 123;
        ~~~~~~~
 
 
Found 1 error in hello.ts:1

可选:创建 tsconfig.json

npx tsc --init
  • tsconfig.json 表示当前目录是一个 TypeScript 项目,并用于配置类型检查和 JavaScript 输出方式。
  • 目录中存在 tsconfig.json,表示该目录是 TypeScript 或 JavaScript 项目的根目录。