程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章334
- 標籤474
標籤查看更多
分類查看更多
- Advanced Web Dev Quiz (27)
- Deep JavaScript Foundations v3 (69)
- Full Stack Fundamentals (47)
- JavaScript Hard Parts v3 (50)
- JS地下城 (5)
- Testing Fundamentals (27)
- TypeScript Fundamentals (28)
- Web Performance Fundamentals (41)
- You Might Not Need a Framework (32)
- 學習經歷 (2)
- 生活亂談 (2)
- 程式筆記 (4)
Dev
前端技術、踩坑紀錄與學習筆記
332 篇2026-09-0520 分鐘閱讀
keyof 取得物件所有屬性鍵組成的聯集型別，typeof 能從 Promise.all 回傳的複雜 tuple 萃取完整型別（並釐清跟執行期 typeof 的差異，含取得 class 靜態面），加上用方括號索引存取型別特定屬性、可連續串接，並讓聯集索引投射出新的聯集型別，三者合起來能大幅減少重複手寫型別的麻煩。
2026-09-0510 分鐘閱讀
用 number | NestedNumbers[] 這個自我參照的型別別名，示範如何描述可無限往下巢狀的數字陣列結構，說明型別別名處理右側定義的方式跟 JavaScript 運算式求值類似，並澄清現在不需要 interface 搭配 type alias，這種寫法之後會用來定義 JSON 型別。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #RecursiveTypes #TypeAlias #UnionTypes 2026-09-0425 分鐘閱讀
示範用 interface 描述物件形狀、用 extends 建立繼承鏈，用 implements 讓 class 遵守 interface 定義的契約，說明為何 interface 只能描述物件形狀，這個限制反而讓它天生跟 implements 相容，比含有聯集型別的 type alias 更適合當類別契約用。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #Interface #TypeAlias #Subtyping #HeritageClauses 2026-09-0415 分鐘閱讀
示範型別別名如何把冗長的內嵌物件型別與 tuple 聯集簡化成一個有語意的名字，可以像變數一樣匯入匯出、集中定義一處，編譯後會被完全抹除，並用交集型別做出類似繼承的擴充效果（如替 Date 加上 getDescription 方法），最後點出型別別名能承載任何型別，這點跟 interface 不同。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #TypeAlias #IntersectionTypes #UnionTypes #Subtyping 2026-09-0312 分鐘閱讀
延續前一篇聯集型別的 printEven、printLowNumber 等函式範例，改用交集型別（&）重新測試，示範它接受的值範圍極窄，卻能同時滿足多個函式各自的型別要求，並整理聯集與交集在「接受什麼值」與「能保證什麼」上呈現的不對稱關係，最後說明交集型別為何在實務中比聯集罕見得多，以及最常出現的實際場合。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #IntersectionTypes #UnionTypes #ObjectAssign #SpreadOperator 2026-09-0326 分鐘閱讀
示範用型別別名為字面值聯集命名，也能改用 number、string 這類更寬泛的型別表達集合；整理聯集型別在控制流程回傳值中最常見的用法，指出 tuple 解構出聯集型別後只能存取共同屬性（最大公因數）的限制，並用 instanceof 型別守衛與判別聯集窄化型別、取回完整存取權，也談型別集合基數的侷限。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #UnionTypes #TypeAlias #Tuples #TypeGuards #Narrowing #DiscriminatedUnions #LiteralTypes 2026-09-0211 分鐘閱讀
用偶數與 1 到 5 兩個數字集合畫成文氏圖，示範聯集型別（|）如何接受任一集合的值、交集型別（&）如何只接受兩者共有的值，並整理「型別願意接受什麼值」與「能對每個成員保證什麼」這兩種思考角度，說明為何聯集接受範圍變大但保證變少、交集接受範圍變小但保證反而變多，直覺上很容易把兩者搞反。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #UnionTypes #IntersectionTypes #LiteralTypes 2026-09-0219 分鐘閱讀
從型別等價性的集合觀點出發，比較靜態/動態型別與結構型別/名義型別這兩組常被混淆的分類，用 Java 對比 TypeScript，說明為什麼 printCar 函式能接受 Car、Truck 甚至任意物件、額外屬性也不影響相容性，並看 instanceof 如何在結構型別系統裡模擬名義型別的檢查方式。
2026-09-0116 分鐘閱讀
說明陣列型別用 T[] 表示的慣例、為何避免用 Array
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #ArrayTypes #Tuples #ReadonlyModifier #LiteralTypes 2026-09-0115 分鐘閱讀
用電話簿物件示範索引簽名語法，說明如何讓 home、work、fax 已知欄位跟任意字串鍵在同一型別裡並存，整理點記法與方括號記法的存取慣例、noUncheckedIndexedAccess 編譯器選項如何處理鍵不存在的風險，並用 Stripe 貨幣金額為例說明字典結構相較陣列更適合的建模情境。
MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog