TypeScript: TypeScript 安装与配置

最后更新：2026-08-26

安装 TypeScript 只需一行命令，但配置好开发环境需要了解几个关键概念——这一课带你从零搭好 TypeScript 的"工作台"。

1. 安装 TypeScript

TypeScript 通过 npm（Node.js 的包管理器）安装。你的电脑上需要先有 Node.js。

(1) 检查 Node.js 是否已安装

打开终端（Windows 用 PowerShell，macOS 用 Terminal），输入：

node --version
npm --version

如果能看到版本号（比如 v18.17.0 和 9.6.3），说明已安装。如果提示"命令未找到"，请先去 Node.js 官网下载安装 LTS 版本。

(2) 全局安装 TypeScript

npm install -g typescript

-g 表示全局安装，装好之后在任何目录都能使用 tsc 命令。

(3) 验证安装成功

tsc --version

看到类似 Version 5.3.3 的输出，说明安装成功。

▶ 示例：检查 TypeScript 安装状态

# 依次执行以下命令，确认环境就绪
node --version
npm --version
tsc --version

输出：

v18.17.0
9.6.3
Version 5.3.3

2. 第一个 tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件，告诉编译器如何处理你的代码。虽然简单项目可以不用它，但实际开发中几乎每个 TS 项目都有这个文件。

(1) 快速生成

在项目目录下执行：

tsc --init

这会自动生成一个 tsconfig.json，里面包含所有可配置项（大部分被注释掉了）。

(2) 核心配置项解读

刚生成的配置文件内容很多，但初学者只需关注这几个：

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true
  }
}

▶ 示例：一个适合本教程的 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. VS Code 配置

VS Code 和 TypeScript 是"亲兄弟"——都是微软的产品，VS Code 对 TS 的支持是开箱即用的，不需要额外安装插件。

(1) 内置功能

VS Code 已经内置了 TypeScript 语言服务，提供：

• 实时类型错误标红（波浪线）
• 自动补全（输入 . 后提示属性和方法）
• 鼠标悬停显示类型信息
• 按 F12 跳转到定义
• 按 F2 重命名变量（所有引用同步更新）

(2) 推荐安装的插件

(3) 配置自动编译

在 VS Code 中按 Ctrl+Shift+B（macOS 用 Cmd+Shift+B），选择 tsc: watch，VS Code 就会在后台监听文件变化——你每次保存 .ts 文件，它自动编译成 .js，不需要手动跑 tsc。

4. 项目目录结构

一个标准的 TypeScript 项目长这样：

my-project/
├── src/              ← TypeScript 源代码
│   ├── index.ts      ← 入口文件
│   └── utils.ts      ← 工具模块
├── dist/             ← 编译输出的 JavaScript（自动生成，不要手改）
│   ├── index.js
│   └── utils.js
├── tsconfig.json     ← TypeScript 配置
├── package.json      ← Node.js 项目配置
└── node_modules/     ← 依赖包（自动生成，不要提交到 git）

5. 常见安装问题排查

❓ 常见问题

📖 小节

• 通过 npm install -g typescript 安装，tsc --version 验证
• tsconfig.json 是项目配置核心，strict: true 必须开启
• VS Code 开箱即用支持 TypeScript，推荐开启 tsc: watch 自动编译
• 标准项目结构：src/ 放源码、dist/ 放编译产物、不要手改 dist
• 遇到问题先查 PATH 和编码，90% 的安装问题出在这两个地方

📝 作业

1. 基础题（难度⭐）：在你的电脑上安装 TypeScript，执行 tsc --version 确认安装成功，把版本号记录下来。
2. 进阶题（难度⭐⭐）：创建一个项目目录，执行 tsc --init 生成 tsconfig.json，然后将 strict 设为 true，outDir 设为 "./dist"，rootDir 设为 "./src"。
3. 挑战题（难度⭐⭐⭐）：在 VS Code 中打开上一步创建的项目目录，配置 tsc: watch 自动编译模式，尝试修改 tsconfig.json 中的 target 值（从 ES2020 改为 ES5），观察编译输出的 JS 代码有什么变化（提示：箭头函数会变成普通函数）。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们