Yachu's Dev Memo

TypeScript - 認識與安裝 TypeScript

Ya Chu's photo
Ya Chu
·

2 min read

Table of contents

什麼是 TypeScript

根據 官網的定義：

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

  • TypeScript 是 Javascript 的超集 (superset)，為 JS 提供了額外的語法

  • TypeScript 主要提供了型別系統和對 ES6 的支援

  • TypeScript 支援 ES6，並可以被編譯成純 Javascript

  • TypeScript 可以運行於任何能夠運行 Javascript 的伺服器和系統上

  • TypeScript 由 Microsoft 開發，程式碼開源於 GitHub 上

TypeScript Vs ES6 Vs ES5

圖片來源：Angular TypeScript Vs ES6 Vs ES5

超集（Superset） 是指包含或涵蓋另一個集合的集合。如果集合 A 中的所有元素也是集合 B 中的元素，那麼集合 A 就是集合 B 的超集。

以程式語言為例，如果 A 語言為 B 語言的超集，意思就是 A 語言包含了 B 語言的所有語法和功能，並且還可能擴展了其他額外的語法和功能。

在這個情況下，A 語言就稱為「超集」，而 B 語言則被稱為「子集」。

為什麼會需要 TypeScript

Javascript 是一個弱型別語言(Loosely typed language)，在 JS 宣告變數時不需要特別定義它的型別，因此我們很難一眼看出函式的參數和變數是什麼型別，可能會因為傳入了錯誤型別的資料而導致程式碼出錯。TypeScript 的出現就是為了解決這個問題。

TypeScript 具備了以下的特性：

  • Strong typing 強型別：變數的型別在宣告時就已經確定

  • Object-oriented-features 物件導向特性：TypeScript 支援介面(Interface)、類別(Class)和物件(Object)

  • Compile-time errors 編譯錯誤

💡
TypeScript 是靜態型別系統的程式語言，在編譯時做型別檢查；Javascript 是動態型別系統的程式語言，在執行時做型別檢查。

使用 TypeScript 的好處

撰寫更好懂、更好維護的程式碼，並減少 bug 的產生

  • 透過型別系統可提高程式碼的可讀性，大部分的函式在看到型別定義時大概就能夠知道該如何使用

  • TypeScript 的強型別讓我們可以在編譯時就預先進行靜態型別檢查，不必等到執行的時候才報錯

  • 增強了編譯器和 IDE 的功能，像是自動完成、介面提示、跳轉到定義、重構等

TypeScript 非常包容

  • TypeScript 是 JavaScript 的超集，.js 檔案可以直接重新命名為 .ts

  • TypeScript 的編譯器可以自由地設定讓專案編譯成想要的 JS 版本

  • 即使不顯示定義型別， TypeScript 也能夠自動做出「型別推論」

  • 可以定義從簡單到複雜的幾乎一切型別：除了 Javascript 的型別之外，Typescript 還提供了像是空值（Void）、任意型別（any）、Never 等特殊型別

  • 即使 TypeScript 編譯報錯，仍然可以產生 JavaScript 檔案

  • 相容第三方函式庫，即使第三方函式庫不是用 TypeScript 寫的，也可以編寫單獨的型別檔案供 TypeScript 讀取

安裝 Typescript

https://www.npmjs.com/package/typescript

在全域環境安裝 TypeScript：

npm install -g typescript

在全域性環境下安裝 Typescript ，之後就可以在任何地方執行 tsc 命令。

建立 Typescript 編譯器的設定檔 tsconfig.json：

tsc --init

編譯一個 TypeScript 檔案：

tsc index.ts

或是直接編譯同一個檔案資料夾下所有 Typescript 檔案：

tsc

TypeScript 編譯器就會幫我們自動掃描所有 .ts 結尾的檔案，並且編譯成 JS 檔案。

💡
使用 TypeScript 編寫的檔案以 .ts 為字尾； 用 TypeScript 編寫 React 時，以 .tsx 為字尾。

Hello Typescript

建立 index.ts 檔案，並撰寫一些 TypeScript 程式碼：

// index.ts
function sayHello(something: string) {
    return 'Hello, ' + something;
}

let message = 'Typescript';
console.log(sayHello(message));

編譯檔案：

tsc index.ts

這時候會產生一個編譯好的檔案 index.js：

// index.js
function sayHello(something) {
    return 'Hello, ' + something;
}
let message = 'Typescript';
console.log(sayHello(message));

左邊為原本的 index.ts，右邊為編譯後的 index.js：

  • 使用 : 指定參數 something 的型別為 string（: 的前後有沒有空格都可以）

  • 編譯後的 JS 程式碼並不會插入任何檢查的程式碼

再把 message 改成陣列試試看：

function sayHello(something: string) {
    return 'Hello, ' + something;
}

let message = [0, 1, 2];
console.log(sayHello(message));

這時候可以看到編輯器中的錯誤提示以及編譯後出現的錯誤訊息：

Argument of type 'number[]' is not assignable to parameter of type 'string'.

儘管 Typescript 在編譯的時候報錯，仍然可以產生 JS 程式碼：

💡
如果要在報錯的時候終止 JS 檔案的產生，可以在 tsconfig.json 中配置 noEmitOnError 即可。關於 tsconfig.json，請參閱官方手冊。

Ref

TypeScript