什麼是 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 中，你需要說明變數包含的資料型別。在這個例子中，變數包含一個 String（字串）。（字串是程式設計術語，指一系列字元。它們看起來像 "這樣"。如果你想了解更多，這個 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)

這額外的 : string 讓讀者可以確信 name 只會是一個字串。以這種方式標註你的變數也讓 TypeScript 有機會驗證它們是否匹配。這非常有用，因為當只有一兩個變數時，跟蹤諸如值的型別這類變化似乎很容易，但一旦數量達到數百個，跟蹤起來就非常困難。編寫型別有助於程式設計師對他們的程式碼更有信心，因為型別可以捕獲錯誤。

簡單來說，我們將這些標註稱為“型別”（Types）。這也是 TypeScript 名稱的由來。TypeScript 的口號之一是“可擴充套件的 JavaScript”，這旨在說明這些額外的型別標註使你能夠處理更大的專案。這是因為你可以預先驗證程式碼的正確性。這意味著你不需要完全瞭解每一個改動如何影響程式的其餘部分。

在 90 年代，甚至直到 5 到 10 年前，在 JavaScript 應用中沒有型別帶來的權衡是可以接受的，因為當時構建的程式規模和複雜性僅限於網站的前端。但今天，JavaScript 幾乎無處不在，被用於構建幾乎任何可以在計算機上執行的東西。大量的移動應用和桌面應用在底層都使用了 JavaScript 和 Web 技術。

構建和理解這些應用要複雜得多，新增型別可以顯著降低改進這些程式的複雜性。

TypeScript 能解決什麼問題？

通常，確保程式碼中沒有 Bug 的需求可以透過編寫自動化測試、手動驗證程式碼是否符合預期，以及最後由另一個人驗證它是否正確來處理。

並不是很多公司都有微軟那樣的規模，但在大型程式碼庫中編寫 JavaScript 時，很多問題都是一樣的。許多 JavaScript 應用由成百上千個檔案組成。對單個檔案的一處改動可能會影響其他任意數量檔案的行為，就像往池塘裡扔進一塊鵝卵石，引起漣漪擴散到岸邊一樣。

驗證專案各部分之間的連線可能會很快變得非常耗時，而使用像 TypeScript 這樣具有型別檢查的語言可以自動處理這些問題，並在開發過程中提供即時反饋。

這些特性使得 TypeScript 能夠幫助開發人員對他們的程式碼更有信心，並節省大量時間來驗證他們沒有意外破壞專案。