Study 學習筆記

Appearance

01 TypeScript 的發展與概論 ​

1.1 TypeScript 簡介 ​

TypeScript 是建立在 JavaScript 的基礎上，除了擁有如其名的 型別系統(TypeSystem) 外，也擁有額外的語法。

1.2 TypeScript 可以解決什麼樣的問題？ ​

1.2.1 使用 JavaScript 開發時最常遇到的問題 ​

  • 使用 JavaScript 開發時最常遇到的問題與麻煩點 ​

      1. 除錯時，除非用眼力暴力掃瞄程式碼，否則 免不了執行程式的步驟
      1. 沒有工具的輔助，單純寫程式，錯字機率本來就很高
      1. 由於 資料格式 / 型別 / 結構錯誤 等，儘管程式執行過程沒錯誤，但 出現非人類預期狀況
      1. 忘記要處理邊緣情境 相關的問題

1.2.2 動態語言 V.S. 靜態語言 ​

  • 動態與靜態語言 Dynamically v.s. Statically Typed Language ​

      1. 動態 語言的特色為：在 程式運行 的狀態下，也就是在英文文章裡會看到的 Run-time 期間，任何變數是經由被代入值來判斷其型別；也就是說，變數的型別會依據存的值本身來判斷。
      1. 靜態 語言的特色則是：在 程式正在編譯 時，也就是所謂的 Compilation 期間，根據程式裡 宣告的型別 (幾乎都適用 文字 來表示，如 Int、Float 等) 來監控型別的狀態。

  • 漸進式型別系統 Gradual Typing ​

    兼具動態與靜態語言的特色 - 程式碼在編譯過程中可能會遇到變數或表達式(Expression) 被顯性地型別註記，這些變數會在靜態地編譯過程中檢測並且被監控；某些沒有被註記型別的變數或表達式等，會在程式裡自行推斷 (Inference) 型別之結果，如果遇到型別對應錯誤時釋放警告。

  • 型別註記 & 型別推論 ​

    • 型別註記 (Type Annotation) ​
      為對變數或表達式進行 文字敘述上的型別宣告動作。
    • 型別推論 (Type Inference) ​
      則是 變數根據被賦予的值之型別來代表該變數之型別；而表達式則是 經運算結果的值之型別來代表整個表達式最後的型別結果。

    簡而言之，撇除掉已經被註記過後的東西，決定其他沒有被註記過後的東西之型別，就是看結果值的型別是什麼就對了。

1.2.3 強型別語言 V.S. 弱型別語言 ​

  • 強型別語言與弱型別語言 Strongly Typed v.s. Weakly Typed Language ​

    • 弱型別語言 對於任意型別的值之間的操作時，會 自動轉換成適當的型別的值進行操作。
    • 強型別語言 則相對不允許不符合預期的型別的值進行操作，例如在 Python 或 Ruby 裡隨意將非數字型別的值與另一個數值進行加減乘除。

  • TypeScript 語言本身的設計 ​

    TypeScript 是一門擁有 漸進式型別系統 (Gradual Typing) 的 弱型別語言 (Weakly Typed)

1.2.4 TypeScript 改善、解決的開發相關的問題 ​

使用型別註記功能時，靜態層面上監測變數或表達式之型別，所以在 程式還未執行前，可以抓到潛在的錯誤。

只要使用 JavaScript Debug 時，除非使用眼力掃整段程式碼來除 Bug，免不了 必須執行程式碼 並根據吐出之訊息來除 Bug。

有時候任何程式上的行為會出現各種結果 - 包含呼叫函式或方法、與陌生的第三者服務接觸等，可能會 忘記要去處理這些邊緣情境 (Edge Cases)。

1.3 學習 TypeScript 的更多好處 ​

1.3.1 對於各種不同版本 JavaScript 的編譯 ​

  • 開源社群提供的解決工具莫過於著名的 Babel Compiler - 負責將 ECMAScript 系列語法轉譯為 ES5 版本的語法。
  • 也會需要自動化的環境來建造專案打包的流程。延伸出的打包專案的工具也是很多種類，像是幫助整合專案的 Webpack 以及進行排除未用程式碼功能的 Rollup.JS 等。
  • 如果使用 TypeScript 的話，它的 編譯器設定 就會自動把程式碼編譯成 JavaScript 版本。

1.3.2 TypeScript 擁有比較完善的物件導向語法 ​

TypeScript 的主要語言設計者 Anders 也是 C# 語言的設計者，因此在型別系統以及物件導向方面的語法也有跟 C# 這門語言有相似之處。

1.3.3 TypeScript 定義檔具備使用說明文件的性質 ​

除了上網查官方網站版本的文件外，也可以查詢名為 TypeScript 定義檔 (Definition File) 的東西。

1.4 征途路上總是也有跌跌撞撞的時候 ​

1.4.1 命名是門哲學，踏入 TypeScript 更是如此 ​

1.4.2 型別與介面，你們搞得我好亂啊！ ​

在學習跟物件導向方面的概念以及實踐一些設計模式時，會比較清楚型別與介面各自使用的時機。

1.4.3 引入第三方套件 ​

這個所謂使用 TypeScript 開發時的陣痛的概念遠比使用原生 JavaScript 還來得大很多。

1.4.4 命名空間與模組，避不了的學習門檻 ​

TypeScript 比起 ES6 的標準還要來個早三年多；也就是說 TypeScript 在 import/export 語法釋出前就有一套名為 命名空間 (Namespaces) 與 模組 (Module) 相關的語法。

1.5 旅程中的第一小步 ​

1.5.1 環境建構 ​

  • 確保電腦有 NodeJS 的環境

    sh
    which node

    此指令結果，會顯示 Node 被下載的位置。

    若出現 node not found，則代表你的主機沒有 NodeJS，請上 Node 官網 下載。

  • 當 NodeJS 下載完成時，會附帶一個名為 npm 的指令 - 是 NodeJS 圈的模組管理工具。

    sh
    which npm

  • 可以開始下載 TypeScript 的編譯指令工具囉

    sh
    npm install -g typescript

  • 下載完成後，檢測

    sh
    which tsc

1.5.2 編輯器以及設定 - 建議使用 VSCode ​

1.5.3 從第一個 Hello World 程式，學習正確地使用 VSCode ​

  • 新增檔案 hello-world.ts

  • 打開檔案，並開始撰寫程式碼

    ts
    function greet(message: string) {
  console.log(message);
}
greet('Hello world!');

  • 開啟終端機，並且進到 hello-world.ts 所在的資料夾，並下達指令

    sh
    tsc hello-world.ts

    編譯結果沒問題時，tsc 就會產生名為 hello-world.js 檔案

  • VSCode 提供的功能與使用技巧 ​

      1. 自動補全功能 (Autocomplete)：宣告過後的變數、函式等都可以很快速的被自動補全。
      1. 型別提示 (Type Hint)：將滑鼠移動到變數、函式等，會跳出型別方面的內容提示。
      1. 型別衝突偵測：使用 TypeScript 開發的過程中，如果偵測到型別上的衝突，VSCode 就會主動跳出警訊，提醒開發者要注意有潛在的錯誤發生 - 這也是使用 TypeScript 開發時，不太需要主動執行程式就可以快速除蟲的重點功能之一。
      1. 快速查詢：如果想要快速查詢某變數、函式、型別宣告或定義所在的內容與位置，可以將鼠標移動到想要查詢的目標上，按下 Ctrl (MacOS 上則是按下command ⌘) 的同時，並按下滑鼠，此時就可以快速導向到該目標上。

MIT Lincensed | Copyright © 2024-present Eason