Dev

程式碼之外，還有生活的藝術前端工程師 / 攝影 / 生活紀錄

文章296
標籤368

標籤查看更多

分類查看更多

前端技術、踩坑紀錄與學習筆記

294 篇

2026-09-0614 分鐘閱讀

TypeScript callable 型別：用 call signature 替函式與回呼定義型別

示範用 interface 的 call signature（冒號）與 type alias 的箭頭語法（=>）替函式定義型別，並討論何時該選 interface、何時該選 type alias：函式庫傾向用可開放擴充的 interface，需要鎖死型別時則用 type alias。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #CallSignature #Interface #TypeAlias #OpenInterfaces

2026-09-0616 分鐘閱讀

TypeScript 型別註冊表模式：結合 keyof 與 declare module 打造可擴充的資料層

示範用一個空的 DataTypeRegistry interface 搭配 keyof 與 declare module，讓 book、magazine 模組不改中央檔案就能註冊型別，fetchRecord 的參數因此自動長出 book | magazine，這個模式對函式庫作者開放使用者擴充型別特別有價值。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #TypeQueries #Keyof #DeclareModule #OpenInterfaces #NeverType #TypeRegistryPattern

2026-09-0520 分鐘閱讀

TypeScript 型別查詢：用 keyof、typeof 與索引存取型別，從既有值反推出型別定義

keyof 取得物件所有屬性鍵組成的聯集型別，typeof 能從 Promise.all 回傳的複雜 tuple 萃取完整型別（並釐清跟執行期 typeof 的差異，含取得 class 靜態面），加上用方括號索引存取型別特定屬性、可連續串接，並讓聯集索引投射出新的聯集型別，三者合起來能大幅減少重複手寫型別的麻煩。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #TypeQueries #Keyof #Typeof #IndexedAccessTypes #UnionTypes #IntersectionTypes #ClassStaticSide

2026-09-0510 分鐘閱讀

TypeScript 遞迴型別：用 NestedNumbers 描述無限巢狀陣列，不再需要 interface 搭配寫法

用 number | NestedNumbers[] 這個自我參照的型別別名，示範如何描述可無限往下巢狀的數字陣列結構，說明型別別名處理右側定義的方式跟 JavaScript 運算式求值類似，並澄清現在不需要 interface 搭配 type alias，這種寫法之後會用來定義 JSON 型別。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #RecursiveTypes #TypeAlias #UnionTypes

2026-09-0425 分鐘閱讀

TypeScript interface：extends 建立繼承鏈，implements 定義類別必須遵守的契約

示範用 interface 描述物件形狀、用 extends 建立繼承鏈，用 implements 讓 class 遵守 interface 定義的契約，說明為何 interface 只能描述物件形狀，這個限制反而讓它天生跟 implements 相容，比含有聯集型別的 type alias 更適合當類別契約用。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #Interface #TypeAlias #Subtyping #HeritageClauses

2026-09-0415 分鐘閱讀

TypeScript 型別別名：取代冗長型別語法，用交集做子型別擴充，且比 interface 更有彈性

示範型別別名如何把冗長的內嵌物件型別與 tuple 聯集簡化成一個有語意的名字，可以像變數一樣匯入匯出、集中定義一處，編譯後會被完全抹除，並用交集型別做出類似繼承的擴充效果（如替 Date 加上 getDescription 方法），最後點出型別別名能承載任何型別，這點跟 interface 不同。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #TypeAlias #IntersectionTypes #UnionTypes #Subtyping

2026-09-0312 分鐘閱讀

TypeScript 交集型別實戰：用 printEven 等函式驗證嚴格但通用的型別，兼談與聯集的不對稱關係

延續前一篇聯集型別的 printEven、printLowNumber 等函式範例，改用交集型別（&）重新測試，示範它接受的值範圍極窄，卻能同時滿足多個函式各自的型別要求，並整理聯集與交集在「接受什麼值」與「能保證什麼」上呈現的不對稱關係，最後說明交集型別為何在實務中比聯集罕見得多，以及最常出現的實際場合。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #IntersectionTypes #UnionTypes #ObjectAssign #SpreadOperator

2026-09-0326 分鐘閱讀

TypeScript 聯集型別實戰：型別別名、控制流程回傳值、tuple 屬性限制、instanceof 窄化與判別聯集

示範用型別別名為字面值聯集命名，也能改用 number、string 這類更寬泛的型別表達集合；整理聯集型別在控制流程回傳值中最常見的用法，指出 tuple 解構出聯集型別後只能存取共同屬性（最大公因數）的限制，並用 instanceof 型別守衛與判別聯集窄化型別、取回完整存取權，也談型別集合基數的侷限。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #UnionTypes #TypeAlias #Tuples #TypeGuards #Narrowing #DiscriminatedUnions #LiteralTypes

2026-09-0211 分鐘閱讀

TypeScript 聯集與交集型別：用集合思維理解 | 和 & 的接受範圍與型別保證差異

用偶數與 1 到 5 兩個數字集合畫成文氏圖，示範聯集型別（|）如何接受任一集合的值、交集型別（&）如何只接受兩者共有的值，並整理「型別願意接受什麼值」與「能對每個成員保證什麼」這兩種思考角度，說明為何聯集接受範圍變大但保證變少、交集接受範圍變小但保證反而變多，直覺上很容易把兩者搞反。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #UnionTypes #IntersectionTypes #LiteralTypes

2026-09-0219 分鐘閱讀

TypeScript 結構型別 vs 名義型別：printCar 為什麼不管物件從哪裡來

從型別等價性的集合觀點出發，比較靜態/動態型別與結構型別/名義型別這兩組常被混淆的分類，用 Java 對比 TypeScript，說明為什麼 printCar 函式能接受 Car、Truck 甚至任意物件、額外屬性也不影響相容性，並看 instanceof 如何在結構型別系統裡模擬名義型別的檢查方式。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #StructuralTyping #NominalTyping #TypeSystem #TypeEquivalence #DuckTyping #InstanceofOperator

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30