TypeScript 环境安装

上一篇我们认识了 TS 是什么，这一篇把环境搭起来，跑通第一个 .ts 文件。整个过程只需要装一样东西——TypeScript 编译器 tsc。前置条件是你已经装好 Node.js（如果还没有，先去看 JavaScript 系列的环境部分）。

1. 安装 TypeScript 编译器

TypeScript 本质上是一个 npm 包，里面有编译器命令 tsc。全局装一次，到处能用：

# 前置条件:已装好 Node.js(建议 16+),终端能跑 npm
node -v
npm -v

# 全局安装 TypeScript 编译器(包含 tsc 命令)
npm install -g typescript

# 验证安装成功,查看版本
tsc -v
# 输出: Version 5.x.x

看到版本号说明安装成功。你也可以不全局安装，而在项目里用 npx tsc 调用，效果一样。

2. 写第一个 .ts 文件

新建一个文件 hello.ts，写入下面这段代码。它和 JS 几乎一样，只是多了 : string 这种类型标注：

// hello.ts
function greet(name: string): string {
  return `你好, ${name}!`;
}

const user: string = "TypeScript";
console.log(greet(user));

3. 用 tsc 编译

浏览器和 Node 都不认识 .ts，所以要先编译成 JS。tsc 命令做的事就是：把 .ts 翻译成 .js，并把所有类型标注擦掉。

# 编译:把 hello.ts 转成 hello.js(类型标注会被擦除)
tsc hello.ts

# 这时会生成 hello.js,内容是纯 JS:
#   function greet(name) {
#       return "你好, " + name + "!";
#   }
#   var user = "TypeScript";
#   console.log(greet(user));

# 用 Node 运行编译后的 JS
node hello.js
# 输出: 你好, TypeScript!

注意生成的 hello.js 里完全没有类型信息——这就是"运行时零成本"的由来。打开看看，你会发现 : string 全被去掉了。

4. 用 tsx 直接运行（推荐）

每次先 tsc 再 node 太麻烦。社区提供了能直接运行 .ts 文件的工具，最推荐的是 tsx（基于 esbuild，飞快）：

# 每次先 tsc 再 node 太麻烦?用 tsx 直接运行 .ts
# (tsx 是基于 esbuild 的快速 TS 运行器,推荐)
npm install -g tsx

tsx hello.ts
# 输出: 你好, TypeScript!

# 老牌的 ts-node 也能做同样的事,但启动比 tsx 慢
# npm install -g ts-node
# ts-node hello.ts

本系列后面的示例都假设你用 tsx 文件名.ts 来运行，省去手动编译的步骤。

5. 体验一下类型检查

把上面的 hello.ts 故意改错——给一个声明为 string 的参数传数字，看看 tsc 怎么报错：

// 故意写错类型,看看 tsc 怎么报错
function greet(name: string): string {
  return "你好, " + name;
}

// ❌ 这里传了数字,类型不匹配
console.log(greet(42));

// 编译时 tsc 会报错:
// hello.ts:6:15 - error TS2345:
// Argument of type 'number' is not assignable to parameter of type 'string'.

这就是 TS 的核心价值：bug 在编译期就被抓出来，根本没机会跑到生产环境。把这个错误改回 greet("TypeScript")，编译就能通过。

6. 编辑器推荐

写 TS 最舒服的编辑器是 VS Code——它和 TS 都出自微软，对类型的智能提示、错误标红、跳转定义都是一等公民。安装 VS Code 后无需额外配置，打开 .ts 文件就有完整的类型支持。其他如 WebStorm、Sublime + LSP 也都支持，但体验以 VS Code 最佳。

小结

环境就绪：装好了 tsc、tsx，能编译和直接运行 .ts 文件，也亲身体验了一次类型报错。下一篇我们系统过一遍 TS 的基础语法——看看 TS 程序长什么样、和 JS 的语法有哪些异同。

← 上一篇 TypeScript 简介

下一篇 TypeScript 基础语法 →