企业官网建设流程全解析

tsc 编译器实战教程：TypeScript-New-Handbook 从安装配置到降级编译

【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 🐣项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook

本教程将带你系统掌握tsc 编译器的安装、配置与实战用法，并以微软官方TypeScript-New-Handbook项目为学习蓝本。无论你是刚接触 TypeScript 的新手，还是想把现代语法降级编译到旧环境的开发者，这份tsc 编译器实战教程都能帮你快速上手，并理解--target降级编译、--strict严格模式等关键概念。

什么是 tsc 编译器？为什么你需要它？

TypeScript 本身无法被浏览器直接运行，必须借助tsc 编译器（TypeScript Compiler）把.ts源码转换为纯 JavaScript。这一过程包含两件事：

• 类型检查：在代码运行前发现潜在 bug（如调用不存在的属性、传参错误）。
• 代码转换：擦除类型注解，并把新语法"降级"为旧环境可运行的代码。

而TypeScript-New-Handbook正是微软官方为撰写新版 TypeScript 手册而建立的孵化仓库（Incubation repository），其中收录了从基础类型到编译器选项的完整讲解，是学习tsc 编译器的最佳配套资料。仓库的核心内容分布在chapters/与reference/目录下，例如 Basics.md 系统讲解了 tsc 的首次使用，Compiler Options.md 则完整罗列了全部编译选项。

第一步：tsc 编译器一键安装方法

打开终端，执行一条命令即可完成tsc 编译器安装：

npm install -g typescript

安装完成后验证版本：

tsc --version

💡 如果不想全局安装，也可以使用npx tsc从本地node_modules调用。

第二步：3 个命令完成首次编译

在任意空目录中新建hello.ts：

// 向世界问好 console.log("Hello world!");

然后运行编译命令：

tsc hello.ts

你会在同目录下看到生成的hello.js——这就是tsc 编译器的输出产物。由于代码本身没有类型错误，终端不会打印任何信息，这正是 tsc 的设计哲学：不打扰你。

第三步：读懂 tsc 编译器的报错信息

把hello.ts改成下面这样：

// @noImplicitAny: false function greet(person, date) { console.log(`Hello ${person}, today is ${date}!`); } greet("Brendan");

再次运行tsc hello.ts，终端会报错：

Expected 2 arguments, but got 1.

这就是tsc 编译器类型检查的威力：即使你没写任何类型注解，它也能发现参数缺失。值得注意的是，即便报错，hello.js依然会被生成——因为 TypeScript 认为"你比它更懂你的代码"。如果你希望在报错时停止输出文件，可以加上：

tsc --noEmitOnError hello.ts

第四步：降级编译实战——target 参数详解

降级编译（Downleveling）是 tsc 编译器的核心能力：把新版本 ECMAScript 语法重写为旧版本。例如默认情况下，tsc 会把模板字符串：

`Hello ${person}, today is ${date.toDateString()}!`

降级为 ES3 兼容的字符串拼接：

"Hello " + person + ", today is " + date.toDateString() + "!"

通过--target参数你可以控制降级的目标版本：

# 编译到 ES5（兼容绝大多数浏览器） tsc --target es5 hello.ts # 编译到 ES2015（即 ES6，保留模板字符串等语法） tsc --target es2015 hello.ts

target的可用值包括ES3（默认）、ES5、ES2015、ES2017直到ESNext。选择原则很简单：目标环境越老，目标版本就设得越低。详细说明可参阅reference/Compiler Options.md中的 "Code Emit Options" 章节。

第五步：tsconfig.json 配置——团队协作的最快方式

当项目变大，逐条敲命令行参数就不现实了。此时应创建tsconfig.json，把tsc 编译器配置固化在文件中：

{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "noImplicitAny": true, "strictNullChecks": true, "noEmitOnError": true, "outDir": "dist" }, "include": ["src/**/*"] }

然后直接运行：

tsc

tsc 会自动读取配置文件完成编译。上述配置的作用：

📌include/exclude/files决定了哪些文件参与编译，具体规则可参考reference/File Inclusion.md。

第六步：严格模式——把 tsc 编译器调到最大威力

tsc 编译器严格模式是保证代码质量的利器，两大核心开关必须掌握：

• noImplicitAny：当 TypeScript 无法推断类型、退回最宽松的any时报错，逼你写出显式类型。
• strictNullChecks：默认情况下null和undefined可赋值给任何类型，这是无数 bug 的源头；开启后它们拥有独立类型，误用时直接报错。

新项目建议直接strict: true一把梭，长期收益远大于初期改造成本。

进阶技巧：常用编译选项速查

除了降级编译和严格模式，还有几个高频tsc 编译器选项值得收藏：

# 生成声明文件（.d.ts），供他人引用你的库 tsc --declaration # 生成 source map，便于浏览器调试源码 tsc --sourceMap # 开启 downlevelIteration，让 for-of 在 ES5 下更准确地迭代 tsc --target es5 --downlevelIteration

其中--downlevelIteration值得一提：它能让for...of循环在 ES5 环境下借助Symbol.iterator精确模拟 ES6 行为（例如正确处理 emoji 这类占两个 UTF-16 单元的字符）。

在 TypeScript-New-Handbook 中系统学习 tsc 编译器

如果你想更深入地掌握tsc 编译器，强烈建议把 TypeScript-New-Handbook 仓库克隆下来边看边练：

git clone https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook

仓库内为你准备了高质量的学习材料：

• chapters/Basics.md：从零讲解 tsc 安装、首次编译、错误处理与降级编译
• reference/Compiler Options.md：全部编译选项的权威说明
• reference/File Inclusion.md：include/exclude/files文件包含机制详解
• scripts/tsconfig.json：项目自身使用的真实编译配置范例
• chapters/Narrowing.md与chapters/More on Functions.md：深入类型收窄与函数类型

克隆后执行npm install && npm start，还能在本地启动文档站点，边读边跑示例。

总结

至此，你已经完成了tsc 编译器从安装配置到降级编译的完整实战闭环：学会了全局安装、单文件编译、读懂报错、用--target做降级编译、用tsconfig.json固化团队配置，以及用严格模式提升代码健壮性。配合 TypeScript-New-Handbook 的官方章节，你完全可以从新手进阶为 TypeScript 实战开发者。现在就打开终端，敲下第一行tsc hello.ts吧！🚀

【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 🐣项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook