iT邦幫忙

鐵人檔案

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

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

嗨!我是 Max!

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

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

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

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

達標好文 Day 01. 遠征 TypeScript・行前準備

通常聽到一門新的技術,第一句話會問的就是... 為何我要使用這門技術呢? 貼心小提醒:如果單純想了解 TS 是什麼,以及優勢與缺點,可以跳過前文喔!...

DAY 2

達標好文 Day 02. 前線維護・型別推論 X 註記 - Type Inference & Annotation

《前線維護》篇章概要 第一次看到 TypeScript 的人,最先看到就是型別註記(以下會把程式碼有註記的部分用 ~ 顯示出來)—— 英文稱為 Type An...

DAY 3

Day 03. 前線維護・物件型別 X 完整性理論 - Object Types Basics

閱讀本篇文章前,仔細想想看 你能不能分辨 TypeScript 型別推論和註記的差別在哪裡呢? 試舉出推論的行為到底是什麼?如何運作的? Nullable...

DAY 4

Day 04. 前線維護・函式型別 X 積極註記 - Function Types

閱讀本篇文章前,仔細想想看 大概可以解釋普通 JS 物件(也就是 JSON 格式,或筆者所謂的狹義物件)在 TypeScript 裡的推論機制。 知道筆者...

DAY 5

Day 05. 前線維護・陣列型別 X 型別陣列 - Array Types

閱讀本篇文章前,仔細想想看 定義一個函式,最需要注意的點有哪些?什麼情形必須積極作型別註記呢? 函式的輸出部分通常(但不是全部)可以不用作型別註記的原因為...

DAY 6

Day 06. 前線維護・陣列與函式 X 陣列與元組 - Array & Functions & Tuples

閱讀本篇文章前,仔細想想看 陣列的推論大致上是如何運作呢? 什麼時候要積極去對陣列進行型別註記呢? 如果還沒理解完畢的話,可以先翻看前一篇文章喔!...

DAY 7

Day 07. 前線維護・列舉型別 X 主觀列舉 - Enumerated Types

閱讀本篇文章前,仔細想想看 陣列跟元組(Tuple)的差別在哪裡?什麼時候用陣列 / 元組比較適合呢? 什麼時候可能不用對函式的參數進行積極註記?試舉個範...

DAY 8

Day 08. 前線維護・明文型別 X 格式為王 - Literal Types

閱讀本篇文章前,仔細想想看 在什麼樣的情況下,你會怎麼決定要選擇使用 TypeScript 的陣列、元組(Tuple)或列舉(Enumerated)呢? 如...

DAY 9

Day 09. 前線維護・選用屬性 X 型別擴展 - Optional Properties

閱讀本篇文章前,仔細想想看 明文型別(Literal Type)是什麼? 如何使用型別化名(Type Alias)?使用化名的好處是什麼? 變數被指派廣義...

DAY 10

Day 10. 前線維護・特殊型別 X 永無止盡 - Never Type

閱讀本篇文章前,仔細想想看 如何跳脫死板定義的型別 type 格式? 對狹義物件的屬性下達 undefined 之原始型別跟使用選用屬性(Optional...