前言
TypeScript 是一种由 Microsoft 开发的静态类型语言，旨在提高 JavaScript 的可读性和可维护性。与 JavaScript 相比，TypeScript 强制使用类型注解，并提供面向对象编程的结构化语法。然而，在 TypeScript 编写的源代码必须需要转换成 JavaScript 代码，才能在浏览器上运行。因此，在本篇文章中，我们将学习如何将 TypeScript 代码转换为 JavaScript 代码。
如何将 TypeScript 转换为 JavaScript
为了将 TypeScript 代码转换为 JavaScript 代码，我们需要借助 TypeScript 的编译器。编译器将 TypeScript 代码编译成 JavaScript 代码，并将其保存在一个或多个 JavaScript 文件中。以下是将 TypeScript 转换为 JavaScript 的过程：
安装 TypeScript。
npm install -g typescript
创建 TypeScript 文件。
// app.ts const greeting: string = "Hello World!"; console.log(greeting);
编译 TypeScript 文件。
tsc app.ts
TypeScript 编译器将生成一个名为
app.js的 JavaScript 文件，其中包含转换后的 JavaScript 代码：var greeting = "Hello World!"; console.log(greeting);
从上面的例子可以看出，编译器将 TypeScript 中的类型注解去除，并生成与 JavaScript 相似的代码，这就是将 TypeScript 转换为 JavaScript 的过程。
源映射
编译后的 JavaScript 代码通常比 TypeScript 代码难以调试。为了解决这个问题，TypeScript 允许使用源映射（source map）。源映射是一种技术，可以将编译后的 JavaScript 代码映射回 TypeScript 代码。
要创建源映射，在编译 TypeScript 代码时，必须添加 --sourceMap 标志：
tsc --sourceMap app.ts
编译器将生成一个名为 app.js 的 JavaScript 文件，以及一个名为 app.js.map 的源映射文件。这个源映射文件可以让调试器自动将编译后的 JavaScript 代码映射回 TypeScript 代码。
模块
TypeScript 支持多种模块系统，例如 CommonJS 和 AMD。在 TypeScript 中，默认情况下使用的是 ES 模块。ES 模块是一种标准化的模块系统，它提供了一个简单的导入/导出语法。
以下是一个使用 ES 模块的 TypeScript 文件：
// calculator.ts
export function add(x: number, y: number): number {
return x + y;
}
export function subtract(x: number, y: number): number {
return x - y;
}上面的代码定义了两个函数 add 和 subtract，并使用 export 关键字将它们导出。在另一个 TypeScript 文件中，可以使用 import 关键字导入这些函数：
// app.ts
import { add, subtract } from "./calculator";
console.log(add(1, 2)); // 3
console.log(subtract(2, 1)); // 1在上面的代码中，我们使用 import 关键字从 calculator.ts 文件中导入了两个函数 add 和 subtract。然后，我们可以像使用普通函数一样使用它们。
在将 TypeScript 转换为 JavaScript 代码时，如果使用的是 ES 模块，则编译器会将模块导入和导出转换为与 ES 模块兼容的代码。
总结
本文介绍了将 TypeScript 转换为 JavaScript 代码的过程。我们学习了如何使用 TypeScript 编译器将 TypeScript 代码编译成 JavaScript 代码，并使用源映射将其映射回 TypeScript 代码。此外，我们也学习了 TypeScript 的模块系统和如何使用 ES 模块。
如果您想通过学习更多 TypeScript 的知识，可以阅读 TypeScript 的官方文档。TypeScript 是前端开发中非常强大的工具，它可以帮助我们更好地组织代码，并减少出错的可能性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e34797d4982a6eb7c43f1