TypeScript.擁抱前端 JavaScript 靜態型別

Whien
5 min readAug 24, 2018

TypeScript 這陣子聽到好多人在講,JavaScript 原本就設計成動態型別,那到底需不需要使用靜態型別呢?

在這篇文章裡,不會告訴你怎麼寫 TypeScript,但會依我的經驗與 github 上目前的趨勢來做個宏觀的探討,並之後再自行選擇是不是要用 TypeScript。

快速簡單介紹一下差別

JavaScript 版本

const num = 1;
const sum = (n) => {
return n + num;
}

TypeScript 版本

const num: number = 1;type Sum = (n: number) => number;const sum: Sum = (n) => {
return n + num
}

較好的使用場合

  • 多人共同合作
  • 專案正準備開始建置
  • Open Source Project
  • 容易粗心大意
  • 懶得寫 Documentation

多人共同合作

在一個中大型開發專案中,一定會有不少夥伴一起寫不同位置的檔案,負責不同的功能,在一開始大家都會整理一個共同的規範,什麼檔案該配置哪裡都會有一定的規則,但這麼一來雖然降低了檔案管理的困難,卻也無法提升對於對方寫的程式的理解。

因此「良好的溝通」、「寫好註解」、「產出好的 Documentation」則是大家的責任,但總有些比較懶或是寫了註解、Documentation 也看不懂,溝通又需要花時間,那有沒有解決辦法呢?

有的,那就是使用 TypeScript 來強制規範大家的習慣!

專案正準備開始建置

為什麼會特別強調「正準備開始」呢?坦白說,在做 JaveScript 靜態型別開發時,如果早期沒有將 TypeScript 應該補上的型別補齊,後期要做補型別的動作是非常非常消耗人力的,因為在沒有靜態型別的開發下,我們會較隨意的寫很多變數、物件與方法,最後會變成非常臃腫的狀態,將 TypeScript 補上前,看到一大片的錯誤訊息就已經足以令人卻步,但如果已經決定要轉為使用 TypeScript,那就好好的乖乖補上吧!

Open Source Project

主要提到 Open Source 是因為,現今有許多的開發者都轉為開發 TypeScript,確保大家在網路世界共同開發時,可以降低錯誤參數或方法的風險,而現今幾乎大型的開源專案都有著 index.d.ts 這樣一份檔案,這份檔案就是定義了整個專案所提供的 API 靜態型別,更是降低了 Document 寫錯的事情,而如果現在要開發自己的 Open Source,記得都要補上靜態型別 index.d.ts 檔案,不然肯定會有人到 issue 哀哀叫的(如我…

容易粗心大意

今天如果只是一個簡單的物件也許會不考慮用靜態型別

const obj = {
num: 1,
str: 'Hello'
}

但如果是一個很龐大的物件時,那就得好好管理,不然到最後可能會連自己都忘記是做什麼用的

const bigObj = {
num: 1,
friends: [{ posts: [{id: 1, ...},{...}] }, ]
users: [{ name: 'Whien', age: 26 }, { name: ... }]
...
}

到這裡,我相信已經看不懂在寫什麼了,因為全部都被包裝在一個 bigObj 裡面,能不能有比較好觀看的方式呢?

有的,TypeScript 定義好靜態型別以後,就可以幫助我們理解一個大物件裡有什麼樣的訊息!

懶得寫 Documentation

這大概是最後底線了,如果不寫 Documentation 又想簡單溝通時,就是好好把靜態型別寫上,這樣任何的開發者只要接到了一個方法,就可以立即知道內容有什麼資訊。

會遇到的困難

  • 難以熟悉
  • 開發變慢
  • 需要大家都會

難以熟悉

確實不得不說,如果以前有寫過靜態語言的開發者,也許會是比較好與快速進入的,但如果是以前從來沒寫過靜態語言而直接轉往 JavaScript 這種高階動態語言的開發者,可能就會很痛苦,因為必須要熟悉定義型別的表達式,要認識 type、struct 與 interface 等等…,可能會是一個不低的門檻。

開發變慢

速度慢在於熟悉度,因此我認為開發變慢不能當作是不使用靜態型別的一種藉口,而是應該提升自己寫靜態型別的速度,在定義型別時,一方面也在定義自己的開發規格了,這是一個挺棒的體驗。

需要大家都會

這是一個大檻,但需要跨過去,開發者都不想浪費時間或在花時間溝通,表現大家看靜態型別的好處與強項,保證大家都會漸漸愛上 TypeScript!

最後

本文就是一系列推坑,但也沒有說怎麼寫 TypeScript,我覺得學習是需要自己去找方法的,而不是透過文章來強迫學習,因此提供靜態型別的好與壞,但我認為好處是大於壞的,通常就是在「習慣」性上需要做改變就是了。

我是懷恩,目前是一位 YOSGO 的核心開發,在一個我熱愛的新創團隊活躍著,是個全職的全端開發者,我熱愛開發與分享「前端專注在瀏覽器的相關開發、效能與互動體驗」
「後端專注在網頁伺服器的效能調適與架構的配置」
「對於網頁技術有著熱衷,隨時跟在新技術的旁邊」
如果您覺得文章有幫助到您,請不吝嗇給我一個手掌
讓我們做一個「Give me five」然後就繼續一起往更美好的開發大道前進吧
如果您有任何問題,歡迎與我聯繫,我也時常在自己 FB 上開直播做紀錄
Github: https://github.com/madeinfree
FB:https://www.facebook.com/haowei.liou
Email: sal95610@gmail.com

--

--

Whien

遨遊在硬體與軟體世界中,對於計算機一切事物都充滿好奇及熱情。