📚 TypeScript 教程系列

  1. 入门与配置（本文）
  2. 基础类型与变量声明
  3. 函数
  4. 流程控制与运算符
  5. 集合类型
  6. 异步编程与错误处理
  7. 接口与类
  8. 泛型与类型组合
  9. 高级类型
  10. 模块、装饰器与工程化

⚠️ 来源声明：本文内容参考自 菜鸟教程 TypeScript 教程，仅供学习交流，版权归原作者所有。
TypeScript 是 JavaScript 的超集，由微软开发并在编译期提供静态类型检查，让大型项目与团队协作更加安全可控。本篇将带你从零认识 TypeScript，理解它和 JavaScript 的差异，搭建本地开发环境，掌握基础语法与项目配置，为后续深入学习打下基础。

TypeScript 简介

TypeScript 简介

什么是 TypeScript

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，在 JavaScript 的基础上增加了可选的静态类型和基于类的面向对象编程。TypeScript 通过类型注解在编译阶段进行类型检查，最终被编译为纯 JavaScript 代码，可以在任何支持 JavaScript 的浏览器、Node.js 环境以及移动端运行。

TypeScript 的设计者是 Anders Hejlsberg，他同时也是 C# 的首席架构师。TypeScript 从 C# 等静态类型语言中汲取灵感，把静态类型系统引入到 JavaScript 生态中，既保留了 JavaScript 的灵活性，又弥补了其在大型工程中类型安全的不足。

一个简单的 TypeScript 代码示例：

1
2
let message: string = "Hello World";
console.log(message);

通过 tsc 编译器，上述代码会被编译为等价的 JavaScript：

1
2
var message = "Hello World";
console.log(message);

为什么需要 TypeScript

JavaScript 作为动态类型语言，变量类型在运行时确定，很多错误只有当代码真正执行到那一行才会暴露。这在小型项目中尚可接受，但在大型项目与多人协作中会带来显著的维护成本。TypeScript 在编译期就把潜在的类型错误揪出来，让问题左移到编写阶段。

下面通过一个对比来直观感受。在 JavaScript 中：

1
2
3
4
5
function greet(name) {
    return "Hello, " + name;
}

greet(123); // 运行时输出 "Hello, 123"，不易察觉的 bug

同样的逻辑在 TypeScript 中：

1
2
3
4
5
function greet(name: string): string {
    return "Hello, " + name;
}

greet(123); // 编译错误：Argument of type 'number' is not assignable to parameter of type 'string'

TypeScript 在编译阶段就报错，避免了把错误带到生产环境。下面这张表总结了在常见开发场景中，JavaScript 与 TypeScript 的差异：

场景JavaScriptTypeScript
参数类型错误运行时才暴露编译时即捕获
访问不存在的属性运行时返回 undefined编译时报错
大规模重构容易遗漏引用，风险高编译器辅助，安全可靠
团队协作依赖文档与约定类型即文档，约束明确
代码可读性类型不明确，需读实现类型注解清晰直观

TypeScript 与 JavaScript 的关系

TypeScript 是 JavaScript 的超集，这意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码。你可以把一个 .js 文件直接改名为 .ts，它通常就能通过编译。这种设计让 JavaScript 项目可以平滑、逐步地迁移到 TypeScript，而不必一次性重写。

二者在类型系统、运行方式、错误发现时机等方面存在明显差异：

特性JavaScriptTypeScript
类型系统动态类型静态类型（可选）
运行方式解释执行编译为 JavaScript 后执行
错误发现时机运行时编译时
IDE 支持基础强大的智能提示
学习曲线平缓略陡，需学习类型语法
与 JS 兼容性—完全兼容，JS 即合法 TS
文件扩展名.js.ts / .tsx

TypeScript 的应用领域

TypeScript 已经渗透到前端、后端、移动端乃至游戏开发的各个领域：

  • 前端 Web 开发：Angular、React、Vue、Next.js、Nuxt 等主流框架均原生支持或深度集成 TypeScript。
  • 后端 Node.js 开发：NestJS、Deno、Bun 等后端框架与运行时把 TypeScript 作为一等公民。
  • CLI 工具：通过 ts-node、tsx 等工具直接运行 TypeScript 源码，无需预编译。
  • 移动端与跨平台：React Native、Expo 等方案用 TypeScript 编写跨平台移动应用。
  • 游戏开发：Babylon.js、Phaser 等游戏引擎提供 TypeScript 类型定义，便于构建大型游戏项目。

TypeScript 的发展历程

TypeScript 的发展历程可以追溯到 2010 年前后。以下是几个关键节点：

  • 2010–2012 起源：Anders Hejlsberg 主导设计，灵感来自 C#，目标是给 JavaScript 带来类型系统与工程化能力。
  • 2013–2014：发布 0.9 与 1.0 版本，语言趋于稳定，类型系统逐步完善。
  • 2015：Visual Studio Code 发布，原生支持 TypeScript，极大推动了其普及。
  • 2016：Angular 2 采用 TypeScript 作为官方开发语言，TypeScript 在前端社区声名鹊起。
  • 2016 TypeScript 2.0：引入 --strictNullChecks，显著增强了空值安全。
  • 2017–2019：DefinitelyTyped 社区繁荣，大量第三方库获得类型定义；3.0–4.0 版本持续增强类型系统。
  • 2023 TypeScript 5.0：装饰器成为正式标准，性能与模块系统大幅改进。
  • 2025：宣布用 Go 语言重写编译器（项目代号 Corsa），目标是在 TypeScript 7.x 实现 10 倍性能提升。

与其他静态类型语言的对比

TypeScript 与 Java、C#、Go 等静态类型语言相比，最大特点是它的类型系统是结构化（structural）的，而非名义（nominal）的——只要结构匹配就算兼容，不需要显式声明继承关系。

特性TypeScriptJava/C#Go
类型系统结构化类型名义类型结构化类型
空值安全通过 strictNullChecks 支持通过可空注解/Optional 支持没有显式空值类型
泛型支持，灵活支持支持，但受限
编译目标JavaScript字节码/IL原生机器码
运行时类型检查无（类型在编译后被擦除）有反射机制有反射机制
学习曲线中等较陡平缓

TypeScript 的局限性

TypeScript 并非银弹，它也有一些需要注意的局限：

局限说明
没有运行时类型类型信息在编译后被擦除，无法在运行时检查，如需运行时校验可借助 zod、io-ts 等库
需要编译步骤源码必须经过 tsc 编译才能运行，增加了构建链复杂度
any 类型是逃生舱滥用 any 会绕过类型检查，失去 TypeScript 的核心价值
高级类型语法复杂条件类型、映射类型等高级特性对初学者门槛较高
老旧库缺少类型定义部分历史久远的第三方库没有官方类型定义，需自行编写或依赖社区

TypeScript 安装

本节介绍如何搭建 TypeScript 的本地开发环境。TypeScript 本身需要通过 npm 安装其编译器 tsc，而编辑器则推荐使用对 TypeScript 支持最好的 Visual Studio Code。

NPM 安装 TypeScript

TypeScript 编译器以 npm 包的形式分发，需要通过 npm 工具安装。如果尚未安装 Node.js 与 npm，请先前往 Node.js 官网安装 LTS 版本，npm 会随 Node.js 一并安装。

如果国内网络访问 npm 官方源较慢，可以先设置国内镜像：

1
npm config set registry https://registry.npmmirror.com

然后全局安装 TypeScript：

1
npm install -g typescript

安装完成后，可以使用 tsc 命令执行 TypeScript 相关操作。查看版本号以确认安装成功：

TypeScript 编译器版本

1
2
$ tsc -v
Version 5.4.5

TypeScript 安装

第一个 TypeScript 程序

新建一个 app.ts 文件，写入以下代码：

1
2
var message: string = "Hello World";
console.log(message);

通常使用 .ts 作为 TypeScript 代码文件的扩展名。执行以下命令将 TypeScript 编译为 JavaScript：

1
tsc app.ts

编译成功后，会在当前目录下生成 app.js 文件，内容如下：

1
2
var message = "Hello World";
console.log(message);

可以看到类型注解 : string 在编译后被移除。使用 node 命令执行 app.js 文件：

1
2
$ node app.js
Hello World

TypeScript 转换为 JavaScript 的过程如下图所示：.ts 源码经过 tsc 编译器，输出 .js 文件，再由 Node.js 或浏览器执行。

VS Code 介绍

很多 IDE 都有支持 TypeScript 的插件，如 VS Code、Sublime Text 2、WebStorm / PHPStorm、Eclipse 等。本教程主要介绍 VS Code——一款可运行于 Mac OS X、Windows 和 Linux 的跨平台源代码编辑器，由微软开发，原生内置 TypeScript 支持。

VS Code IDE

补充：国内阿里与字节也有基于 VS Code 开发的 AI IDE，如阿里 Qoder 与字节 Trae，对国内开发者也是可选项。

Windows 上安装 Visual Studio Code

  1. 前往 VS Code 官网下载对应平台的安装包。

VS Code 安装向导

  1. 双击 VSCodeSetup.exe 图标进行安装，按照向导提示完成安装。

安装 IDE

  1. 安装完成后，打开 Visual Studio Code 界面。

  2. 在左侧窗口点击当前编辑的代码文件，选择 open in command prompt（在终端中打开），即可在屏幕右侧下半部分使用 tsc 命令执行 TypeScript 文件代码。

文件遍历

Mac OS X 安装 Visual Studio Code

Mac 平台可以前往 VS Code 官网下载 .zip 压缩包，解压后将 Visual Studio Code 拖入「应用程序」文件夹即可。也可以通过 Homebrew 安装：brew install --cask visual-studio-code。

Linux 安装 Visual Studio Code

Linux 平台根据发行版选择 .deb（Debian/Ubuntu）或 .rpm（Fedora/CentOS）包安装，也可下载 tarball 解压使用。详见官方安装指南。

使用 VS Code 开发 TypeScript

VS Code 原生内置了 TypeScript 语法支持，但不含 TypeScript 编译工具 tsc，需要额外安装编译器才能将 TS 源码转译为 JS。

安装 TypeScript 编译器

通过 npm 全局安装 TypeScript 编译器：

1
npm install -g typescript

验证安装：

1
tsc --version

Hello World 示例

新建项目文件夹并用 VS Code 打开：

1
2
3
mkdir HelloWorld
cd HelloWorld
code .

新建文件

新建文件 helloworld.ts，写入以下代码：

1
2
let message: string = "Hello World";
console.log(message);

在 VS Code 集成终端中运行 tsc helloworld.ts 进行编译，生成 helloworld.js：

编译 Hello World

编译后的 JavaScript 代码移除了类型声明，let 也会根据目标版本降级（如目标为 ES5 时降级为 var）：

1
2
var message = "Hello World";
console.log(message);

然后执行 node helloworld.js 查看输出：

运行 Hello World

1
Hello World

智能提示（IntelliSense）

智能提示提供代码自动补全、悬浮文档、函数参数签名提示等功能，显著提升编码效率。VS Code 对单文件以及带 tsconfig.json 的项目均提供完整的智能提示。

智能提示

悬浮文档提示：鼠标悬停在 TypeScript 标识符上可查看类型与说明；也可以用快捷键 editor.action.showHover 手动唤起。

悬停提示

函数签名提示：编写函数调用时自动展示入参说明并高亮当前参数；输入左括号 ( 或逗号 , 时触发，也可以用快捷键 editor.action.triggerParameterHints 手动唤起。

签名帮助

代码片段（Snippets）

VS Code 内置基础的 TypeScript 代码片段，输入关键字时会自动弹出快捷模板。也可以安装第三方扩展或自定义 TS 代码片段。

代码片段

小贴士：将 editor.snippetSuggestions 设置为 "none" 可关闭片段提示；可配置其优先级为 top、bottom、inline（默认）。

错误与警告提示

TypeScript 语言服务会实时校验代码：

  • 状态栏汇总错误/警告总数
  • 点击统计数字或使用快捷键 workbench.actions.view.problems 打开问题面板
  • 异常代码行内标红，右侧缩略标尺标注位置

错误提示

内联错误

使用快捷键 editor.action.marker.nextInFiles / editor.action.marker.prevInFiles 可在问题之间快速跳转。

代码跳转导航

VS Code 提供丰富的代码导航能力：

  • 跳转到定义（editor.action.revealDefinition）：定位源码定义处
  • 预览定义（editor.action.peekDefinition）：弹窗预览，不切换文件
  • 查找所有引用（editor.action.goToReferences）：列出所有调用位置
  • 跳转至类型定义：定位变量所属的类型源码
  • 跳转至实现（editor.action.goToImplementation）：查找接口/抽象方法的实现

通过命令面板还可以进行符号检索：

  • 当前文件内查找符号（editor.action.gotoSymbol）
  • 全工作区检索符号（workbench.action.showAllSymbols）

代码格式化

VS Code 内置 TypeScript 格式化工具，可通过 js/ts.format.* 系列配置自定义格式化规则。如需关闭内置格式化：

1
"js/ts.format.enable": false

代码重构

VS Code 内置常用的重构能力，如提取函数、提取常量等。选中代码后点击灯泡图标或使用快捷键 editor.action.quickFix 可调出重构菜单。

重构

统一重命名：选中变量或方法，使用快捷键 editor.action.rename 可一键修改项目内所有同名标识符。

重命名

调试功能

VS Code 原生支持 TypeScript 调试，兼容源码映射（SourceMap），支持断点、变量查看、调用栈追溯、调试控制台交互。

调试数据检查

前端网页调试：借助 Chrome/Edge 或 Firefox 调试扩展，可调试浏览器端 TypeScript 代码。

后端 Node 调试：使用内置调试器调试 Node.js 服务。

代码校验工具（Linter）

VS Code 未内置 TypeScript 校验工具，需要安装扩展。主流工具 ESLint 兼容 TypeScript，安装 ESLint 插件后编辑器会实时标错并支持一键快速修复；可参考 typescript-eslint 文档配置 ESLint 环境。

TypeScript 特性

相对于 JavaScript，TypeScript 增加了许多关键功能，特别是围绕类型系统和代码结构的增强。核心特性概述：

  • 静态类型检查：编译时检查类型匹配，提前捕获潜在错误。
  • 类型推断：根据赋值自动推断变量类型，减少手写注解。
  • 接口与类型别名：通过 interface 和 type 定义复杂的数据结构。
  • 类与模块：支持构造函数、继承、访问修饰符（public/private/protected）与 ES 模块化。
  • 泛型：在函数、接口、类中使用参数化类型，兼顾复用与类型安全。
  • 编辑器支持：与 VS Code 集成时提供智能提示、自动补全与重构。
  • 兼容 JavaScript：所有合法的 JavaScript 代码都是合法的 TypeScript 代码，可逐步迁移。

📌 以上特性会在后续篇章深入讲解：基础类型与变量声明（第 2 篇）、接口与类（第 7 篇）、泛型与类型组合（第 8 篇）、高级类型（第 9 篇）、模块与工程化（第 10 篇）。本文先聚焦环境搭建与基础语法。

TypeScript 基础语法

基础语法示例

一个 TypeScript 程序由以下几个部分组成：模块、函数、变量、语句和表达式、注释。

第一个 TypeScript 程序

下面是一个输出 “Hello World” 的 TypeScript 程序。

Runoob.ts 文件代码：

1
2
const hello: string = "Hello World!";
console.log(hello);

使用 tsc 命令编译 TypeScript 代码：

1
tsc Runoob.ts

编译后会生成 Runoob.js 文件：

Runoob.js 文件代码：

1
2
var hello = "Hello World!";
console.log(hello);

使用 node 命令执行：

1
2
$ node Runoob.js
Hello World!

整个流程是：TypeScript 源码 → tsc 编译器 → JavaScript 输出 → node 执行。

也可以同时编译多个 .ts 文件：

1
tsc file1.ts file2.ts file3.ts

tsc 常用编译参数如下表所示：

序号编译参数说明
1–help显示帮助信息
2–module载入扩展模块
3–target设置 ECMA 版本
4–declaration额外生成一个 .d.ts 扩展名的文件。如 tsc ts-hw.ts --declaration 会生成 ts-hw.d.ts 和 ts-hw.js
5–removeComments删除文件的注释
6–out编译多个文件并合并到一个输出的文件
7–sourcemap生成一个 sourcemap (.map) 文件，存储源码与编译后代码的映射信息
8–module noImplicitAny在表达式和声明上有隐含的 any 类型时报错
9–watch在监视模式下运行编译器，会监视输出文件，在它们改变时重新编译

TypeScript 保留关键字

下表列出了 TypeScript 的保留关键字及其说明：

关键字说明
abstract用于定义抽象类或抽象方法
any表示任意类型，禁用类型检查
as类型断言，用于将某种类型转换为另一种类型
await用于异步函数中，暂停代码执行直到 Promise 解决
boolean表示布尔类型
break退出循环或 switch 语句
case用于 switch 语句中的分支
catch用于捕获异常
class用于定义类
const定义常量变量
continue跳过当前循环，继续下一次循环
debugger启动调试器，暂停代码执行
declare声明一个变量或模块，通常用于类型声明文件
default定义 switch 语句的默认分支
delete删除对象的属性或数组的元素
do用于 do...while 循环
else定义条件语句中的 else 部分
enum定义枚举类型
export用于从模块中导出变量、函数或类
extends用于类的继承，表示类继承其他类
false布尔值 false
finally定义 try...catch 语句中的最终执行代码块
for用于 for 循环
from用于模块导入语句，指定模块的来源
function定义函数
get用于对象的 getter 方法
if用于条件判断
implements用于类实现接口
import用于从模块中导入内容
in用于检查对象中是否包含指定的属性，或用于 for...in 循环
infer用于条件类型中推断类型
instanceof检查对象是否是指定类的实例
interface用于定义接口
let定义块级作用域的变量
module定义模块（在较早的 TypeScript 版本中使用）
namespace定义命名空间（在较早的 TypeScript 版本中使用）
new创建类的实例
null表示空值
number表示数字类型
object表示非原始类型
of用于 for...of 循环
package用于模块系统，标识包
private用于类成员的访问修饰符，表示私有
protected用于类成员的访问修饰符，表示受保护的
public用于类成员的访问修饰符，表示公共的
readonly表示只读属性
require用于导入 CommonJS 模块
return退出函数并可返回值
set用于对象的 setter 方法
string表示字符串类型
super用于调用父类的方法或构造函数
switch用于 switch 语句
symbol表示符号类型
this引用当前类或对象的实例
throw抛出异常
try用于异常处理语句 try...catch
true布尔值 true
type用于定义类型别名
typeof获取变量或表达式的类型
undefined表示未定义的值
unique用于 symbol 类型的唯一标识符
var用于声明变量（已不推荐使用）
void表示没有返回值的类型
while用于 while 循环
with用于创建一个作用域，在该作用域内可以省略对象的引用（不推荐使用）
yield用于生成器函数中，暂停和恢复生成器的执行

空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。这些空白字符通常用于代码缩进，以提高代码的可读性。

TypeScript 区分大小写

TypeScript 是区分大小写的语言，Name 和 name 是两个不同的标识符。

分号是可选的

每条语句末尾的分号是可选的，但建议使用。以下两行都合法：

1
2
console.log("Runoob")
console.log("Google");

但是，当多条语句出现在同一行时，分号是必需的分隔符，否则会报错：

1
console.log("Runoob");console.log("Google");

TypeScript 注释

注释是一种良好的编程习惯，可以提高程序的可读性。注释可以包含诸如作者、功能说明等信息，编译器会忽略所有注释。

TypeScript 支持两种类型的注释：

  • 单行注释（//）：// 之后的内容直到行尾都是注释。
  • 多行注释（/* */）：可以跨越多行。

注释示例：

1
2
3
4
5
6
7
// 这是一个单行注释

/*
 这是一个多行注释
 这是一个多行注释
 这是一个多行注释
*/

TypeScript 与面向对象

对象与类

面向对象编程（OOP）是一种对现实世界理解和抽象的方法。TypeScript 是一门面向对象的编程语言，主要包含两个核心概念：对象和类。

  • 对象：对象是类的一个实例，有状态和行为。例如，一条狗是一个对象，它的状态包括颜色、名字、品种，行为包括摇尾巴、叫、吃。
  • 类：类是一个模板，它描述一类对象的行为和状态。
  • 方法：方法是类的操作的实现步骤。

下面是一个 TypeScript 面向对象编程实例：

1
2
3
4
5
6
7
class Site {
  name(): void {
    console.log("Runoob");
  }
}
var obj = new Site();
obj.name();

上述代码定义了一个类 Site，它有一个方法 name()，向终端输出 “Runoob”。new 关键字创建了该类的一个对象，并通过对象调用 name() 方法。

编译后的 JavaScript 代码：

1
2
3
4
5
6
7
8
9
var Site = /** @class */ (function () {
    function Site() { }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

执行该 JavaScript 代码，输出结果为：Runoob。

tsconfig.json 配置

tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译器选项和项目设置。一个项目根目录下存在 tsconfig.json 文件，就表示该目录是 TypeScript 项目的根目录。

基本配置

一个最小化的 tsconfig.json 示例：

1
2
3
4
5
6
7
8
9
10
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "strict": true,
        "outDir": "./dist"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
}

关键字段说明：

  • target：编译目标 JavaScript 版本
  • module：使用的模块系统
  • strict：启用所有严格类型检查选项
  • outDir：编译输出目录
  • include：指定要包含在编译中的文件
  • exclude：指定要排除的文件

编译目标版本

通过 target 选项指定编译后的 ECMAScript 版本。可选值包括 ES3、ES5、ES6/ES2015、ES2020、ESNext 等。

不同目标版本会影响输出代码的写法。例如，目标是 ES5 时使用 var：

1
var greeting = "Hello";

目标是 ES2020 时使用 let/const：

1
let greeting = "Hello";

模块系统

module 选项配置模块系统，可选值包括：none、commonjs、amd、umd、es6、es2020、esnext。

  • commonjs：Node.js 默认模块系统，使用 require / module.exports。
  • **es6/esnext**：使用 ES 原生import/export`，适合现代前端构建工具链。

严格模式

启用 "strict": true 会一次性开启所有严格检查，这等价于单独启用以下选项：

  • strictNullChecks：严格的 null 检查
  • noImplicitAny：禁止隐式 any
  • strictFunctionTypes：严格的函数类型检查
  • strictPropertyInitialization：严格的属性初始化检查
  • noImplicitThis：禁止隐式 this
  • alwaysStrict：输出 use strict

始终启用 strict: true，这是最佳实践。

路径别名

路径别名可以简化导入路径，避免冗长的相对路径。

1
2
3
4
5
6
7
8
9
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@components/*": ["src/components/*"]
        }
    }
}

使用示例：

1
2
import Button from "@components/Button";
import { Header } from "@/components";

文件包含与排除

通过 include 和 exclude 控制哪些文件会被编译：

1
2
3
4
{
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
}

常用编译选项一览

选项说明
target编译目标版本
module模块系统
strict严格模式
outDir输出目录
rootDir源码根目录
esModuleInterop允许 ES 模块互操作
skipLibCheck跳过库文件类型检查
declaration生成 .d.ts 声明文件

小结

  • tsconfig.json 是 TypeScript 项目的配置文件
  • compilerOptions 存放核心编译设置
  • include / exclude 控制参与编译的文件
  • 路径别名可以简化导入路径
  • strict: true 应始终启用

TypeScript 编译选项

TypeScript 编译器（tsc）拥有众多编译选项，合理配置这些选项能够精准控制类型检查的严格程度、输出的代码格式以及模块系统的行为。本节详细介绍常用的编译选项及其作用。

编译过程与编译选项

TypeScript 的编译流程是：源码（.ts / .tsx，包含类型注解）→ TypeScript 编译器（tsc，按编译选项进行类型检查、输出格式控制、目标版本转换、声明文件生成等）→ 编译输出（.js JavaScript 代码、.d.ts 类型声明、.map Source Map）。

编译选项大致可分为四类：

  • 类型检查：strict、noImplicitAny、strictNullChecks
  • 输出控制：outDir、declaration、sourceMap
  • 模块系统：module、moduleResolution、esModuleInterop
  • 语言特性：target、lib、jsx

输出控制选项

控制编译产物的输出位置与附加文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "compilerOptions": {
        // 输出目录
        "outDir": "./dist",

        // 源码根目录
        "rootDir": "./src",

        // 生成 .d.ts 声明文件
        "declaration": true,

        // 声明文件输出目录
        "declarationDir": "./types",

        // 生成 source map
        "sourceMap": true,

        // 生成 .js.map 文件的根目录
        "mapRoot": "./map"
    }
}

类型检查选项

控制类型检查的严格程度，建议始终开启 strict: true：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    "compilerOptions": {
        // 严格模式（推荐始终开启）
        "strict": true,

        // 检查 null 和 undefined
        "strictNullChecks": true,

        // 检查 this 参数
        "noImplicitThis": true,

        // 严格函数类型
        "strictFunctionTypes": true,

        // 严格属性初始化
        "strictPropertyInitialization": true,

        // 不允许隐式 any
        "noImplicitAny": true,

        // 不允许函数遗漏返回值
        "noImplicitReturns": true
    }
}

模块选项

控制模块系统与模块解析策略：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
    "compilerOptions": {
        // 模块系统
        "module": "commonjs",

        // 模块解析策略
        "moduleResolution": "node",

        // 解析基础路径
        "baseUrl": ".",

        // 路径别名
        "paths": {
            "@/*": ["src/*"]
        },

        // ES 模块互操作
        "esModuleInterop": true,

        // 允许合成默认导入
        "allowSyntheticDefaultImports": true,

        // 隔离模块
        "isolatedModules": true
    }
}

ES 特性选项

控制目标语言版本与启用的库：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    "compilerOptions": {
        // 编译目标
        "target": "ES2020",

        // 启用的库
        "lib": ["ES2020", "DOM"],

        // 报告未使用的局部变量
        "noUnusedLocals": true,

        // 报告未使用的参数
        "noUnusedParameters": true,

        // 降级迭代器以兼容低版本目标
        "downlevelIteration": true
    }
}

实验性选项

用于启用尚未稳定或进阶的语言特性：

1
2
3
4
5
6
7
8
9
10
11
12
{
    "compilerOptions": {
        // 启用装饰器（TypeScript 5.0 前需要此选项）
        "experimentalDecorators": true,

        // 启用装饰器元数据
        "emitDecoratorMetadata": true,

        // 跳过声明文件类型检查，提升编译速度
        "skipLibCheck": true
    }
}

常用编译选项组合

Node.js 项目推荐配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "lib": ["ES2020"],
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "declaration": true
    }
}

编译选项分类速查表

类别常用选项
输出outDir, rootDir, declaration, sourceMap
类型检查strict, strictNullChecks, noImplicitAny
模块module, moduleResolution, paths, esModuleInterop
ES 特性target, lib, downlevelIteration
实验性experimentalDecorators, emitDecoratorMetadata

至此，我们已经完成了 TypeScript 的入门介绍、环境搭建、基础语法与项目配置的学习。下一篇将深入 TypeScript 的基础类型与变量声明，正式进入类型系统的核心内容。