什麼是 JavaScript？

由於 TypeScript 擴充了 JavaScript，因此這是一個良好的起點。JavaScript 常用於建立網站。在建立網站時，您會使用三種語言：HTML、CSS 和 JavaScript (JS)。廣義來說：HTML 定義將出現在網頁上的內容，CSS 定義網頁的視覺樣式，而 JS 定義網頁的互動行為。

我們將具備這些技能組描述為「前端」開發人員。您使用三種語言在 Safari、Firefox、Edge 或 Chrome 等網路瀏覽器中建立網頁。由於網路在商業和資訊分享方面非常普及，因此對於擅長使用這三種語言的人來說，需求龐大。

與「前端」開發人員的角色相關的是「後端」開發人員的技能組，也就是建立電腦服務，透過傳遞 HTML/CSS/JS 與網路瀏覽器通訊，或透過更直接地傳送資料與另一項服務通訊。您不需要使用 HTML、CSS 或 JS 來撰寫這種類型的程式碼，但它通常是您的工作的最終產品，因為它可能會顯示在網路瀏覽器中。

程式語言做什麼？

程式語言是人類和電腦溝通的一種方式。人們閱讀程式碼的次數遠遠多於撰寫程式碼的次數，因此開發人員建立了擅長以少量程式碼解決特定問題的程式語言。以下是使用 JavaScript 的範例

var name = "Danger"
console.log("Hello, " + name)

第一行建立一個變數（實際上是一個可以儲存其他東西的方塊），然後第二行將文字輸出到主控台（例如 DOS 或終端機）"Hello, Danger"。

JavaScript 被設計為一種腳本語言，這表示程式碼從檔案的頂端開始，然後逐行向下執行該程式碼。為了提供一些對比，以下是 Java 中的相同行為，它建構於不同的語言限制

class Main {
  public static void main(String[] args) {
    String name = "Danger";
    System.out.println("Hello, " + name);
  }
}

這兩個程式碼範例執行相同的工作，但是 Java 版本附帶許多不一定是關於明確告訴電腦該做什麼的字詞，例如 class Main {、public static void main(String[] args) {，以及兩個額外的 }。它也有一些行尾的分號。這兩種程式語言都沒有錯，但是 Java 旨在建構與 JavaScript 不同的東西，而這些額外的程式碼片段在建構 Java 應用程式的限制內是有意義的。

不過，重點是，有一行傑出的程式碼，我想讓我們比較一下

// JavaScript
var name = "Danger"

// Java
String name = "Danger";

這兩行程式碼都宣告了稱為 name 的變數，其中包含值 "Danger"。

在 JavaScript 中，您使用縮寫 var 來宣告變數。同時，在 Java 中，您需要說明變數包含哪種類型的資料。在此情況下，變數包含一個 字串。（字串是程式設計術語，表示字元集合。它們 "看起來像這樣"。如果您想進一步了解，這段 5 分鐘影片 是很好的入門教材。）

這兩個變數都包含一個字串，但不同的是，在 Java 中，變數只能包含一個字串，因為這是我們在建立變數時所說明的。在 JS 中，變數可以變更為任何東西，例如數字或日期清單。

說明如下

// Before in JS
var name = "Danger"
// Also OK
var name = 1
var name = false
var name = ["2018-02-03", "2019-01-12"]

// Before in Java
String name = "Danger";
// Not OK, the code wouldn't be accepted by Java
String name = 1;
String name = false
String name = new String[]{"2018-02-03", "2019-01-12"};

這些權衡在 1995 年這些語言建置的背景下是有道理的。JavaScript 最初被設計為一種小型程式語言，用於處理網站上的簡單互動。另一方面，Java 是專門建置來製作可以在任何電腦上執行的複雜應用程式。他們預期會用於建置不同規模的程式碼庫，因此語言要求程式設計師撰寫不同類型的程式碼。

Java 要求程式設計師更明確地說明變數的值，因為他們預期人們會建置更複雜的程式。而 JavaScript 則選擇省略具體資訊以方便閱讀，並預期程式碼庫會小很多。

什麼是 TypeScript？

TypeScript 是一種程式語言 - 它包含所有 JavaScript，然後再增加一些。使用我們上面的範例，讓我們比較 JavaScript 和 TypeScript 中的「Hello, Danger」指令碼

// JavaScript
var name = "Danger"
console.log("Hello, " + name)

// TypeScript
var name = "Danger"
console.log("Hello, " + name)

// Yep, you're not missing something, there's no difference

由於 TypeScript 的目標只是延伸 JavaScript，我們看到的現有 JavaScript 程式碼可作為 TypeScript 運作。TypeScript 新增到 JavaScript 的延伸旨在幫助您更明確地說明程式碼中使用的資料類型，有點像 Java。

以下是相同的範例，但使用 TypeScript 更明確地說明變數是什麼

var name: string = "Danger"
console.log("Hello, " + name)

這個額外的 : 字串 讓讀者可以確定 name 將只會是一個字串。以這種方式註解您的變數也會讓 TypeScript 有機會驗證它們是否相符。這非常有用，因為追蹤變數中值的類型等變更似乎很容易，當它只有一個或兩個時，但一旦開始達到數百個，那將是很難追蹤的。撰寫類型有助於程式設計師對他們的程式碼更有信心，因為類型會發現錯誤。

簡單來說，我們稱這些註解為「類型」。因此得名類型指令碼。TypeScript 的標語之一是「可擴充的 JavaScript」，這表示這些額外的類型註解讓您可以處理更大的專案。這是因為您可以事先驗證您的程式碼有多正確。這表示您比較不需要了解每個變更如何影響程式的其他部分。

在 90 年代，甚至可能在 5 到 10 年前，JavaScript 應用程式中沒有類型的權衡是可以接受的，因為正在建置的程式的大小和複雜性僅限於網站的前端。然而，現在 JavaScript 幾乎無所不在，用於建置幾乎所有在電腦上執行的東西。大量的行動裝置和桌上型電腦應用程式在幕後使用 JavaScript 和網路技術。

這些在建構和理解上都複雜得多，加入型別大幅降低了改善這些程式複雜性的難度。

TypeScript 可以解決哪些問題？

通常，確保程式碼中沒有錯誤的需求，可以透過撰寫自動化測試來處理，然後手動驗證程式碼是否如預期運作，最後再請另一個人驗證程式碼看起來是否正確。

並非許多公司都像 Microsoft 那麼大，然而在大型程式碼庫中撰寫 JavaScript 的許多問題都是相同的。許多 JavaScript 應用程式是由數十萬個檔案組成的。對個別檔案的單一變更可能會影響其他任何數目檔案的行為，就像將一顆小石頭丟進池塘中，並導致漣漪擴散到岸邊一樣。

驗證專案中每個部分之間的連線會很快地耗費時間，使用 TypeScript 等經過型別檢查的語言可以在開發期間自動處理此問題並提供即時回饋。

這些功能讓 TypeScript 能夠幫助開發人員對自己的程式碼更有信心，並在驗證他們沒有意外中斷專案時節省大量時間。