[從 0 開始的 Angular 生活]No.5 認識 TypeScript

發表於 | 更新於 | 分類於

前言

在 Angular 的世界中，並不是使用一般的 JavaScript 進行開發，而是使用 TypeScript 進行程式語言的撰寫。然而 TypeScript 與 JavaScript 又有什麼關係呢？

認識 TypeScript

我們可以從一張圖了解 TypeScript 與 JavaScript 的關係：

從這張圖我們可以得知， TypeScript 是包覆著整個 JavaScript 的每個版本，換句話說， TypeScript 是 JavaScript 的超集合。

如何撰寫 TypeScript

而要撰寫 TypeScript 的語言並不困難，我們仍然使用 JavaScript 來撰寫 TypeScript ，差別在於多了一些語言特性，但很多時候都還是仰賴我們在 JavaScript 建立起的觀念，因此擁有扎實的 JavaScript 基礎是相當重要的。

使用 TypeScript 的好處

JavaScript 是動態型別的語言，也被稱為弱型別的程式語言，是在執行時期才真正擁有型別，而且會因為內容的不同而更改型別。相較於習慣靜態型別的程式語言(如 C#)的開發者來說，這樣是非常困惑的事情，因為沒有辦法很明確的知道某個變數是什麼型別。

而 TypeScript 的其中一個特性是，可以讓 JavaScript 直接宣告某個變數應該是什麼型別。

不用擔心瀏覽器語法相容問題

在前端領域中往往要考量到瀏覽器的相容性，舉例來說我們可能使用 ES6、7 的某個語法，但是在 IE8、IE9 卻沒辦法支援這些語法，這時候就必須安裝額外的套件像是 Babel 來處理這個情況，或者乾脆改用別的語法。

而 TypeScript 有 JavaScript 的編譯器，用來將 TypeScript 編譯成瀏覽器看得懂的 JavaScript ，而這個過程中 TypeScript 也會自動地幫我們把較高版本的 JavaScript 轉換成較低版本如 ES5 的語法，這是相當方便的。

親自體會

到 TypeScript 的官方網站，有個 Playgrund，我們可以觀察 TypeScript 轉換成 JavaScript 後會是什麼樣子，這邊只是幫助我們了解 TypeScript 可以做些什麼，而一些 TypeScript 的語言特性等用到再說。

像這樣隨意地寫一個 ES6 的 class

1
2
3
4
5
6
7
8
class greet {
  sayHello() {
    console.log('Hello');
  }
}

let obj = new greet();
obj.sayHello();

會被編譯成這樣

1
2
3
4
5
6
7
8
9
10
var greet = /** @class */ (function () {
  function greet() {
  }
  greet.prototype.sayHello = function () {
    console.log('Hello');
  };
  return greet;
}());
var obj = new greet();
obj.sayHello();

因此我們只需要專注於 TypeScript 即可，不需要理會編譯出來的 JavaScript ，只需要知道 TypeScript 會幫我們搞定相容性的問題。

0%