先來個自我介紹

嗨！大家好！
我是小馬彬，兩年前端工作經驗的前端工程師，工作主要都是在 WebGIS 的開發，處理地理資訊系統的資料視覺化方面，像是 Google Map、OpenLayers、ArcGIS JavaScript、Cesium，還剛好有幸玩到 Three.js，做一個仿照 Google 街景應用的網頁，上述的技術算是題外話，在這個系列文中不會再提到 XD。

過去鮮少有寫文章的經驗，硬著頭皮來參加鐵人賽，想要趁此機會好好訓練自己的寫作能力，並且利用這次來向世界宣告，這一年來鋼鐵般的鍛鍊（偷用鐵人賽的宗旨）。

本次系列文中的前端技術大多都是用額外瑣碎的時間自學，在將這些心得撰寫成文章時，可能會有闡述不清或疏漏的情況，還請大家多多指教。

關於主題

因為觀察到 TypeScript 使用人數比率似乎有越來越多的趨勢，就也順勢玩了一把，過程中意識到強型別真的是非常的美妙，能夠及早發現及早治療一些小毛病，雖然實際應用時有不少地方卡了很久在想該怎麼定義型別 XD，也就是因為如此，希望撰寫這些文章時，能夠將這些在 React 開發時使用 TypeScript 曾經卡過的重要細節帶出來。

另一方面是最近剛完成 The F2E - 第二屆 前端 & UI 修練精神時光屋，挑戰九週，一週做出一個作品，幾乎都有利用到 TypeScript 或是 React Hooks 來實作，所以想要整理看看自己這一陣子玩弄到的新東西。

此系列文適合的讀者

• 需要有 ES6 基礎知識

• 需要有 Node.js + npm 基礎知識

• 需要有 Webpack 基礎知識

• 可能需要有 React 基礎知識，也可能可以無視 Class Components 並且從 Hooks 開頭

• 想了解 React Hooks 加上 TypeScript 時來進行開發的過程

預計內容

預計會用開一個專案，從頭蓋到尾的方式來寫作。

起手式會以建構出能編譯 TypeScript 的 Webpack 專案，粗略的講解各種 TypeScript 的型別（會以個人常用到的為主），Interface 定義介面，Generic 泛型的使用筆者認為這也相當相當重要，不過不一定能說明的清楚，還得斟酌拿捏一番。

而後引入以下這些來帶出不同的文章

• React Hooks

• ESLint

• Material-UI

• JSS

• React Router

• Redux

• Formik

• React Intl

• Draft.js

• React DnD

• Storybook

• redux-observable

• Jest

• React Testing Library

• Puppeteer

簡短敘述我認為使用開發 TypeScript 的優點

由 C# 的爸爸主持開發（混進了奇怪的優點？）

JS 因為是弱型別語言，型別錯誤或是打錯語法之類的在撰寫時可能不會被檢查出來

TypeScript 能用強型別的方式撰寫，在開發時期就能檢查到錯誤，寫出不易出錯的 code

因為強型別，而且有 interface 等等的功能，就必須得好好定義並真正理解自己的大部分程式碼，提升對自己撰寫程式碼時的掌握度

下一篇開始就會以建立專案然後引入 Webpack 及 TypeScript 的方式進行