TypeScript 编译是如何工作的

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

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

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

• 无论任何代码都是用TypeScript语言编写的，保存在以任何名称开头并以“ .ts”结尾的文件中。
• 这个后缀告诉编译器，该文件包含用TypeScript语言编写的程序或代码，因此编译器会相应地处理和编译代码。
• 当编译器收到一个“ .ts”文件时，它首先将TypeScript程序代码编译成JavaScript代码本身。
• 在进行上述过程时，编译器实际上创建了另一个JavaScript文件（后缀为“ .js”）。
• 然后，在将TypeScript代码文件编译为JavaScript代码文件之后，它实际上读取和解释JavaScript代码。
• 在解释JavaScript代码之后，编译器编译该代码，然后产生结果。
• 因此，与JavaScript编译过程相比，TypeScript编译需要更多时间，首先将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