【前端開發】TypeScript 是什麼？優化 JavaScript 開發體驗的程式語言
2023/05/18閱讀時間約 7 分鐘
自己在剛開始進入前端領域時，很剛好遇上需要使用 TypeScript 的案子，一開始都是跟著前輩怎麼寫就怎麼寫，不太有其他餘力來思考「為什麼」會需要寫這門程式語言，直到自己後來使用了 TypeScript 完整開發了電商的購物流程，才慢慢理解到使用 TypeScript 的好處與優勢。
這篇文章主要會分享：TypeScript 是什麼？它要達到什麼樣目的？TypeScript 是透過怎麼樣的手段來優化 JavaScript 的開發體驗，以及自己使用了 React TypeScript 開發半年以上後的心得感想。
在這篇文章中，我不會分享實際的應用範例，因為那樣篇幅可能會太長，如果以後有機會的話，會再依照語法主題式地跟大家分享，那麼就讓我們開始吧！
TypeScript 是什麼？
TypeScript 是 JavaScript 的超集，通過引入靜態型別檢查和額外的語言特性，為 JavaScript 開發人員提供了更強大的工具和能力。它保留了 JavaScript 的彈性和兼容性，同時提供了更好的可讀性、可維護性和可靠性。
相信有些人可能會有跟我一開始接觸 TypeScript 時一樣的困惑，什麼是超集？什麼又是靜態型別檢查呢？
超集（Superset）是指包含或涵蓋另一個集合的集合。換句話說，如果集合 A 中的所有元素也是集合 B 中的元素，那麼集合 A 就是集合 B 的超集。
以程式語言為例，有時會將一種語言稱為另一種語言的超集。意思是這種語言包含了另一種語言的所有語法和功能，並且可能還擴展了一些額外的功能。在這種情況下，該語言被稱為超集，而被包含的語言則被稱為子集。
也就是說，TypeScript 可以被稱為 JavaScript 的超集。 TypeScript 包含了 JavaScript 的所有語法和功能，我們可以在符合 TypeScript 所規範的模式下撰寫 JavaScript，只有稍微改變撰寫程式碼的語法，並且理解 TypeScript 所要解決的問題，就可以獲得 TypeScript 強大的好處。
了解 TypeScript 與 JavaScript 最基本的關係後，接著讓我們來聊聊什麼是「靜態型別系統」。
靜態型別系統
如果對 JavaScript 有一點了解的話，會知道以現代的網頁開發來說，我們會使用各式各樣的打包工具來優化 JavaScript 的相容性，使其可以在不同的瀏覽器中運作。
在 JavaScript 程式碼從本地到能在伺服器執行，主要會經歷以下過程：「編譯 → 執行」。
我們的開發環境會依照專案中的一些設定檔案、套件來編譯出符合需求的程式碼，而 TypeScript 的靜態型別系統會在程式碼編譯時，將用 TypeSrcipt 撰寫的程式碼轉譯成 JavaScript，並且根據上下文去檢查型別正不正確。
這裡大家可能會對「靜態」這件事感到疑惑，難道在使用 TypeScript 以前 JavaScript 是動態的產生型別嗎？
沒錯，JavaScript 還真的是動態產生型別的，在編譯 JavaScript 的過程中，JavaScript 並不會知道我們撰寫的程式碼實際上的型別是什麼，要等到執行的時候才會知道 JavaScript 變數、表達式回傳值的實際型別。
有些人可能會聯想到：「這是不是跟 JavaScript 是弱型別有關係呢？」
是的，因為在 JavaScript 執行的過程中，變數裡頭的值會做自動轉型，當遇到一些情境時 JavaScript 會把這些值用一些方式轉型去符合當下的運算情境，例如：在 if 判斷式中的條件如果帶入基本型別，JavaScript 就會轉成布林值以方便進行後續的流程判斷。
這會衍生出一個問題是，當今天我們在某一行程式碼使用了預期外的型別，我們就要等到它被執行時，我們才會知道它是不是有問題，這會讓 JavaScript 變得非常難除錯。
而 TypeScript 就是一個可以讓我們在編譯時，預先檢查程式碼是否有型別上的問題，不會等到執行時才報錯。
這裡有個重要的點需要知道，因為 JavaScript 終究是動態型別系統，TypeScript 只是一個輔助在編譯時檢查錯誤的工具，還是有可能在程式碼執行時遇到預期外有關型別的問題，因為 TypeScript 並沒有辦法在編譯時提前知道實際丟進來的資料型別是什麼，不過這一點可以透過熟悉 TypeScript 的語法來解決。
所以 TypeScript 到底是什麼呢？其實它就是一門透過靜態型別系統更嚴謹撰寫 JavaScript 的程式語言，並且協助將其語法轉譯成 JavaScript 的編譯器（畢竟瀏覽器是讀不懂 TypeScript 的）。
TypeScript 可以解決什麼問題
在前文我們有提到，在 JavaScript 程式碼從本地到能在伺服器執行會經歷以下過程：「編譯 → 執行」。 相信大家可能都曾經遇過，以下情境：明明編譯都編過了，等到要觸發某段程式碼的時候才發現：「哇勒？怎麼會是 undefined ？」或是在某某物件底下找不到預期出現的屬性，或是最常出現的拼字錯誤也難以檢查出來。
如果是使用 React 進行開發的話，甚至可能會出現元件層級層層疊疊，明明知道一定是屬性傳入有誤導致元件資料出不來，但就是怎麼都找不到問題，最後才發現自己根本把屬性的名稱拼錯了。
使用 TypeScript 雖然不能完全避免關於資料傳遞的各種問題，但我們可以：
- 在編譯時就發現問題，避免預期外的空值
- 定義使用者界面，使用元件時會有對應提示，不用擔心會帶錯屬性
- 建立更嚴謹的程式碼撰寫風格
是不是聽起來超級香的？
使用心得
經歷過幾個大型專案的開發後，我認為 TypeScript 有優點有缺點，優點的效益遠遠超過克服缺點的所需要花的成本，優點的部分前文有提過了，所以我們就來聊聊使用 TypeScript 的缺點吧：
- 較難精通，對程式菜鳥而言學習曲線較高
- 如果沒有一套管理模式，會淪為一種裝飾用的工具，例如：不太確定怎麼撰寫型別時，就都使用 any 這個型別（也就是任意型別都可以符合）打天下，還不如一開始就使用 JavaScript 撰寫就好了
以上缺點我認為是前端的原罪，如果要導入、學習一個工具，一定都會有對應的學習成本以及衍生的管理成本，所以除了這兩個缺點外，可能還有其他的缺點，不過我暫時沒想到。
值得一提的是，如果想要嘗試撰寫 TypeScript 的話，並不需要靠自己完全整合，現代的前端框架可以在啟動新專案時直接建立對應的模板，可以說隨著前端技術的演進，TypeScript 的開發門檻逐漸降低了。
雖然這篇文章並沒有提到實際範例，主要是想要跟大家分享，TypeScript 其實並沒有想像中的難理解，只要持續的開發、練習或是觀摩其他人的作法，就可以慢慢透過它提升開發體驗。
現在的我可以說根本離不開 TypeScript 了，因此非常推薦大家花時間投資研究！
希望本篇文章可以讓初學 TypeScript 的人，更了解其在前端開發領域所扮演的角色為何，希望之後可以再把 TypeScript 的使用情境跟大家分享，我是 Vivian ，我們下次見。
關於我：
關於我：
一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：[email protected]
390會員
92內容數
留言0
查看全部
