iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

讓 TypeScript 成為你全端開發的 ACE! 系列

嗨!我是 Max!

近幾年來,TypeScript(以下簡稱TS) 在各大 JS 框架的支援度越來越高,它優越的型別與介面系統以及更多結合 ECMAScript 擴充語法支援,使專案使用 TS 開發時,除了可增強其維護性外,也達成了原本 JS 很難實踐或很麻煩的問題。

型別系統最終目的要讓開發者避免幾種常見錯誤:寫錯字 / 缺少實踐類別或物件的性質與方法 / 缺少額外的型別檢查等。另外,如果結合設計模式以及好的寫程式習慣,TS 可以幫你奠定好專案的架構基礎,使得開發過程充滿成就感,因為寫出來的都是漂亮、維護性高的程式碼。

以下就由我來介紹如何使 TS 成為你開發前後端的王牌!

鐵人鍊成 | 共 51 篇文章 | 326 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11. 前線維護・特殊型別 X 無法無天 - Any & Unknown Type

閱讀本篇文章前,仔細想想看 當函式遇到 100% 無法跳脫或會拋出例外的狀況,這時 TypeScript 會如何對該函式進行推論? never 型別為所...

DAY 12

Day 12. 機動藍圖・介面宣告 X 使用介面 - TypeScript Interface Intro.

《機動藍圖》篇章概要 本系列第二部分:《機動藍圖》(The Agile Blueprint)篇章涵括的範圍就是 TypeScript 的重頭戲。不外乎,筆者想...

DAY 13

Day 13. 機動藍圖・介面的延展 X 功能與意義 - Interface Extension & Significance

閱讀本篇文章前,仔細想想看 如何宣告介面(Interface)? 介面跟型別(Type)在語法上的差別與規則會是什麼?(筆者目前還沒講概念上的差別,讀者先...

DAY 14

Day 14. 機動藍圖・函式超載 X 究極融合 - Function Overload & Interface Merging

閱讀本篇文章前,仔細想想看 試問介面跟型別系統的差異性在哪? 為何要儘量對程式碼進行抽象化的動作? 如果還沒理解完畢的話,可以先翻看前一篇文章喔! 什...

DAY 15

Day 15. 機動藍圖・功能多樣性 X 多樣性介面 - More on TypeScript Interface

閱讀本篇文章前,仔細想想看 到目前為止對於 TypeScript Interface 介面的理解到什麼程度呢? 你認為 TypeScript 和第三方套件...

DAY 16

Day 16. 機動藍圖・介面與型別 X 混用與比較 - TypeScript Interface V.S. Type

閱讀本篇文章前,仔細想想看 TypeScript 的型別系統與介面之間在語法上的差別與介面或型別的使用有何共通點呢?但意義上又會差在哪? 如果還沒理解完畢的...

DAY 17

Day 17. 機動藍圖・複合型別 X 型別複合 - TypeScript Union & Intersection

閱讀本篇文章前,今天什麼都不用想! 直接進入正文,快看下面! 筆者就直接讓油門繼續摧下去~正文開始! 筆者 O.S.:今天又是數學時間,要學好程式可真不...

DAY 18

Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

閱讀本篇文章前,仔細想想看 複合型別 union 與 intersection 的功能與意義代表為何? 如果還沒理解完畢的話,可以先翻看前一篇文章喔! 今...

DAY 19

Day 19. 機動藍圖・存取修飾 X 藍圖規劃 - TypeScript Class Access Modifiers

閱讀本篇文章前,仔細想想看 TypeScript 類別(Class)的意義是什麼? TypeScript 類別跟介面(Interface)的最大差別在哪裡...

DAY 20

Day 20. 機動藍圖・類別繼承 X 延用設計 - TypeScript Class Inheritance

閱讀本篇文章前,仔細想想看 描述類別存取修飾子(Access Modifiers)的功能與意義。 為何類別要實踐某介面時,介面裡的所有規格在類別裡會直接綁...