初學者的打字稿，第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中文網其他相關文章！