TypeScript 编译是如何工作的？

在本文中，我们将尝试了解 TypeScript 编译的工作原理（例如 TypeScript 代码或程序如何编译并在浏览器控制台中生成输出）。

首先，我们知道 TypeScript 是 JavaScript 的超集语言，具有一些附加功能，包括类型添加。我们还可以将数据类型与变量声明一起添加，并将返回类型与函数声明（或方法声明）一起添加。 TypeScript 也被称为可选静态类型语言，因为它为编译器提供了是否包含与变量关联的数据类型的选项，或者它基本上允许我们使编译器不知道数据或变量的类型等。TypeScript 使JavaScript 类型系统更易于使用，也减少了我们作为用户或开发人员在使用 JavaScript 时面临的所有问题。

让我们了解 TypeScript 编译是如何工作的？

• 每当使用 TypeScript 语言编写任何代码时，都会将其保存在一个名为 any 的文件中，后跟一个包含“.ts”的后缀。
• 该后缀向编译器表明该文件具有以 TypeScript 语言编写的程序或代码，因此编译器会处理该事实并相应地编译代码。
• 当编译器接收到一个文件（“.ts”文件）时，它首先在 JavaScript 本身中编译 TypeScript 程序代码。
• 当编译器执行上述过程时，它实际上创建了另一个 JavaScript 文件（具有后缀“.js”）。
• 然后在将 TypeScript 代码文件编译成 JavaScript 代码文件后，它实际上是读取并解释了 JavaScript 代码。
• 在解释 JavaScript 代码之后，编译器编译该代码，然后生成结果。
• 因此，与 JavaScript 编译过程相比，TypeScript compile 首先将 TypeScript 文件编译为 JavaScript，然后将结果生成到浏览器的控制台中需要更多时间。

现在我们已经详细了解了 TypeScript 的编译，让我们使用下面列出的编码示例来了解所有事实：

示例：在此示例中，我们将首先创建一个 TypeScript 文件（后缀为“.ts” ），其中包含我们需要在浏览器控制台中输出的一些逻辑或结果。

Javascript

let displayData = (
    id: number, 
    name: string, 
    field: string) : string => {
          return (id + " - " + name + " - " + field);
}
  
console.log(displayData(1 , "Aman", "CSE"));

编译器接收到的上述代码片段使 TypeScript 代码转换为以下 JavaScript 代码（文件名是“.js”本身）：-

Javascript

var displayData = function (id, name, field) {
    return (id + " - " + name + " - " + field);
};
  
console.log(displayData(1, "Aman", "CSE"));

输出：两个代码片段的输出将保持不变，如下所示。

1 - Aman - CSE