尧图网站建设 
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.tstarget的可用值包括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/**/*] }然后直接运行tsctsc 会自动读取配置文件完成编译。上述配置的作用配置项作用target: es5降级编译到 ES5兼容老浏览器module: commonjs使用 CommonJS 模块规范strict: true一键开启全部严格模式检查noImplicitAny禁止隐式any类型strictNullChecks强制显式处理null/undefinedoutDir统一输出到dist目录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.mdinclude/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 tsc 编译器实战教程：TypeScript-New-Handbook 从安装配置到降级编译
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.tstarget的可用值包括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/**/*] }然后直接运行tsctsc 会自动读取配置文件完成编译。上述配置的作用配置项作用target: es5降级编译到 ES5兼容老浏览器module: commonjs使用 CommonJS 模块规范strict: true一键开启全部严格模式检查noImplicitAny禁止隐式any类型strictNullChecks强制显式处理null/undefinedoutDir统一输出到dist目录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.mdinclude/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考