初学者的打字稿，第1部分：入门

让我们从一个问题开始本教程：“什么是打字稿？”

Typescript是键入JavaScript的类型超集，可编译为普通JavaScript。类比，如果JavaScript是CSS，那么Typescript将是SCSS。

您编写的所有有效的JavaScript代码也是有效的打字稿代码。但是，使用TypeScript，您可以使用静态键入和最新功能，这些功能已汇编为Plain JavaScript，所有浏览器都支持。打字稿旨在解决使JavaScript可扩展的问题，并且做得很好。

在本教程中，您将首先阅读Typescript的不同功能以及为什么学习是一个好主意。本文中的其余部分将涵盖打字稿的安装和汇编，以及一些流行的文本编辑器，可为您提供支持Typescript语法和其他重要功能的支持。

为什么我们需要打字稿？

我们使用编程语言来指导计算机我们希望它们做某事。它们基本上是一种交流媒介。但是，计算机并不直接了解我们编写的JavaScript，PHP或Python代码。我们编写的所有人类可读代码最终都将转换为计算机可以运行和理解的机器代码。

现代编程语言是按照程序员的需求编写的。这意味着不同的编程语言的设计具有不同的功能集，因为它们的使用方式。 JavaScript的编写是为了使您可以通过编写最少的代码来轻松完成工作。

JavaScript自早期以来就变得越来越受欢迎，现在广泛用于小型和大型项目。在编写小程序时，可以接受的JavaScript的某些局限性在与许多团队成员一起从事大型项目时会妨碍生产力。

创建TypeScript是为了解决这些限制而创建的，通过添加各种功能（例如类型检查），以帮助您快速捕获大规模项目中代码时可能会出现的任何错误。

为什么要学习打字稿？

如果您以前从未使用过Typescript，那么您可能会想知道为什么当它汇编到JavaScript时，为什么还要麻烦它。

让我向您保证，您不必花很多时间学习打字稿。 Typescript和JavaScript都具有非常相似的语法，您可以将const关键字重命名，以指定我们要通过重新分配或防止其重新陈述来防止对该变量的值进行任何更改。但是，这并不意味着该变量的价值是不可变的。还有其他方法可以改变它。这是一个示例：

 const果实= [“苹果”，“芒果”，“香蕉”];<br> const蔬菜= [“土豆”，“洋葱”，“黄瓜”]；<br><br>果实push（“橙色”）;<br> // [“苹果”，“芒果”，“香蕉”，“橙色”]<br><br>水果[0] =“木瓜”;<br> // [“木瓜”，“芒果”，“香蕉”，“橙色”]<br><br>水果=蔬菜//错误<br>

直到最后一行，上面的代码是完全有效的JavaScript，并且不会丢任何错误。我们宣布不确定为价值。这种方法是有道理的，因为它允许我们动态添加，删除或更新对象的属性。但是，它也可能是错误或意外行为的来源。这是一个示例：

让Guy = {<br> 名称：'Mario'，<br> 年龄：56<br> }<br><br> console.log（guy.name'是'guy.ahe'年龄。）;<br> //马里奥不确定。<br>

错误的AHE并不是JavaScript中的错误，但它会被打字给出。尝试将上述代码从打字稿到JavaScript编译，您将看到有关围triangle（）的错误。这会导致毫无意义的值作为我们三角形的周长。

功能外triangle（a，b，c）{<br> console.log（三角形的周长为：$ {abc}`）;<br> }<br><br>外围三角形（20，30，“马铃薯”）；<br> //三角形的周长为：50potato<br><br>外围三角形（“马铃薯”，10）;<br> //三角形的周长是：土豆10固定<br><br>外围三角形（）;<br> //三角形的周长是：nan<br><br>外围三角形（20、30、50）;<br> //三角形的周长是：100<br>

即使您没有对上述代码进行任何更改，并尝试将其从打字稿到JavaScript进行编译，由于提供的参数数量不匹配，因此您仍然会因第二和第三函数调用而遇到错误。但是，我们可以通过指定我们期望函数perimeterTriangle()接受的参数类型来为我们的函数定义添加更多信息。

函数围triangle（a：number，b：number，c：number）{<br> console.log（三角形的周长为：$ {abc}`）;<br> }<br><br>外围三角形（20，30，“马铃薯”）；<br> //错误：类型字符串的参数无法分配到类型号。<br><br>外围三角形（“马铃薯”，10）;<br> //错误：预期三个参数，但有2个参数。<br><br>外围三角形（）;<br> //错误：预期三个参数，但有0。<br><br>外围三角形（20、30、50）;<br> //三角形的周长为100。<br>

现在，由于参数类型中的不匹配，即使是第一个函数呼叫也会引起错误。 Typescript将帮助您捕获许多此类错误，并从长远来看节省大量时间。

将打字稿汇编为JavaScript

假设您已经在.ts文件中编写了一些打字稿。浏览器将无法自己运行此代码。您将必须将打字稿编译成普通的JavaScript，并可以由浏览器理解。

如果使用IDE，则可以将代码编译到IDE本身中的JavaScript。例如，Visual Studio允许您将打字稿代码直接编译为JavaScript。您将必须创建一个tsconfig.json文件，在其中指定将打字稿文件编译到JavaScript的所有配置选项。

当您不从事大型项目时，最适合初学者的方法是使用终端本身。首先，您必须移至终端中的打字稿文件的位置，然后运行以下命令。

 TSC First.TS<br>

这将在同一位置创建一个名为first.js的新文件。请记住，如果您已经有一个名为first.js的文件，它将被覆盖。

如果要编译当前目录中的所有文件，则可以在通配符的帮助下进行。请记住，这不会递归起作用。

 tsc *.ts<br>

最后，您只能通过在一行中明确提供其名称来编译某些特定文件。在这种情况下，将使用相应的文件名创建JavaScript文件。

 TSC First.TS Product.TS bot.ts<br>

让我们看一下以下程序，该程序在打字稿中乘以两个数字。

令A：数字= 12;<br>令B：数字= 17;<br><br>函数showproduct（第一个：数字，第二个：数字）：void {<br> console.log（“产品为：”第一 * second）;<br> }<br><br>展示产品（a，b）;<br>

当目标版本设置为ES6时，上面的打字稿代码将以下JavaScript代码编译为以下JavaScript代码。请注意，在汇编之后，您现在在打字稿中提供的所有类型信息如何消失。换句话说，该代码被汇编为JavaScript，浏览器可以理解，但是您可以在更好的环境中进行开发，这可以帮助您捕获很多错误。

令A = 12;<br>令B = 17;<br>功能showproduct（第一，第二）{<br> console.log（“产品为：”第一 * second）;<br> }<br>展示产品（a，b）;<br>

在上面的代码中，我们指定了变量a和b的类型为数字。这意味着，如果稍后您尝试将b值设置为“ Apple”之类的字符串，那么Typescript将向您显示“ Apple”不可分配给类型number的错误。您的代码仍将编译到JavaScript，但是此错误消息将使您知道您犯了一个错误并帮助您避免在运行时避免问题。

这是一个屏幕截图，显示Visual Studio代码中的错误消息：

上面的示例显示了Typescript如何不断为您提供有关代码可能错误的提示。这是一个非常基本的示例，但是当您创建非常大的程序时，此类消息在帮助您编写强大的代码的情况下会大有帮助，而错误的机会较小。

最后的想法

该系列中的该入门教程旨在为您提供有关不同打字稿功能的简要概述，并帮助您安装语言以及有关您可以用于开发的IDE和文本编辑器的一些建议。下一部分介绍了将打字稿代码编译到JavaScript的不同方法，并向您展示了Typescript如何帮助您避免一些常见错误。

希望您喜欢本教程。该系列的下一个教程将讨论Typescript中可用的不同变量类型。

以上是初学者的打字稿，第1部分：入门的详细内容。更多信息请关注PHP中文网其他相关文章！