Javascript的型別特性容易造成難以重構的情況發生

Javascript寬鬆的型別檢查雖然能在第一時間加快開發速度，但隨著程式越來越複雜化，後續Debug的難度也會越來越高。因此通常先甘後苦會更實在一些，採用 Typescript 作為型別檢查的解決方案，雖然一開始的時候必須要定義 typing，但對於未來不論擴增優化都能達到一定的效益。
Typescript is Javascript that scales.
Typescript 除了能夠透過語法就能檢查出型別的錯誤，還有一個巨大的優點， IntelliSense & autocomplete。如果你使用 VScode，Typescript 能夠提供可用的變數、屬性或者 module 的提示，藉此大大加速開發時間

保持程式碼風格一致

團隊合作開發軟體時，保持程式碼風格一致很重要，能有一致的程式碼風格，會讓程式碼更加容易理解，並且在開發時能專注在程式邏輯，而非程式碼的語法差異。而目前我自己還在理解的是這兩套檢查程式碼風格的工具

1. Lint

可以設置偏好的規則，然後透過 Lint 檢查。如果使用 Typescript ，則需採用 TSLint ，但要注意的是 TSLint 即將停止開發，因為 ESLint 將會支援 Typescript，如果要初步引進 Lint，可以考慮直接使用 ESLint。

2. prettier

prettiier 是一個程式碼格式化工具。
程式碼的格式化與 lint 的最大差異在於，前者以產出一樣的風格為目標，後者以檢查特定的規則為目標。而這兩個工具可以同時使用，用 prettier 產出固定風格的程式碼，然後如果有額外必須要遵守的規則，就讓 Lint 提醒吧。

React 開發 component 時，lifecycle 中的邏輯無法重複使用

原本在React16.8之前render props 與 high order component 都可以解決這個問題，但16.8版本之後所提供的最佳解則是使用 React hook。

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。 -https://zh-hant.reactjs.org/docs/hooks-intro.html

在 component 的實作上，全面改用 functional component 與 hook，因為 hook 讓開發者能夠使用簡潔的語法創造出可以重複使用的功能（functionality）。

總結解決方案

1. 使用 Typescript 預防 javascript 的型別錯誤，讓重構程式碼更加容易，並且在開發時能夠讓編輯器提供 IntelliSense & autocomplete。
2. 使用 prettier, tslint, lint-staged 和 husky 以自動格式化加上少部分的人工修改，確保 codebase 有一致的程式碼風格。
3. 使用 React hook 以更少的程式碼，創造更容易維護的 component，更容易規模化的應用程式。