iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
1

先來個自我介紹

嗨!大家好!
我是小馬彬,兩年前端工作經驗的前端工程師,工作主要都是在 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 的方式進行


下一篇
【Day 02】從一個空白資料夾開始,建置單純編譯 .ts 的 webpack 環境
系列文
TypeScript + React + 雜七雜八30

尚未有邦友留言

立即登入留言