程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章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-1023 分鐘閱讀
整理型別守衛作為型別系統與執行期判斷的接合點，列出 instanceof、typeof、真假值檢查等內建守衛，示範用 value is Type 語法寫自訂守衛、asserts 拋錯取代條件分支，並看私有欄位存在檢查與 switch (true) 兩種進階寫法，提醒守衛邏輯要跟斷言精準對齊，避免產生錯誤型別。
2026-09-1015 分鐘閱讀
示範用 public 等存取修飾詞寫在建構子參數前，一次完成欄位宣告與賦值的參數屬性語法，並用一個打錯字的 honk 方法示範 override 如何在編譯期抓出沒真的覆寫到基底類別方法的隱藏 bug，還能在重構改名時提早示警，搭配 noImplicitOverride 編譯器選項強制養成標註習慣。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #ParamProperties #OverrideKeyword #NoImplicitOverride 2026-09-0922 分鐘閱讀
用鎖住 car 序號欄位為例，示範 private、protected 這兩個只在編譯期生效的存取修飾詞如何搭配 getter 受控存取，編譯後即消失只是誠實制度，對比真正私有的 # 欄位如何做到執行期封裝、還能用私有欄位存在檢查當型別守衛判斷實例身分，最後看 readonly 如何鎖住欄位不被重新賦值。
2026-09-0916 分鐘閱讀
用 Car 這個 class 示範 TypeScript 要求欄位必須預先宣告型別（不像 JavaScript 能動態掛屬性），方法的型別標註跟一般函式相同，並介紹靜態欄位/方法（this 是 class 本身而非實例）、類別欄位初始化器如何把邏輯搬出建構子，以及 static block 如何做非同步初始化。
2026-09-0811 分鐘閱讀
用一個 getData 函式加上條件式回傳的例子，示範沒有明確回傳型別時，漏掉的回傳路徑會讓型別錯誤散落到上百個呼叫端，補上 Promise<{ properties: string[] }> 這種明確標註後，錯誤會直接集中顯示在函式宣告處，變成一個真正可以動手修的問題，而不是滿地開花的連鎖反應。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #TypeAnnotations #ExplicitReturnTypes 2026-09-0815 分鐘閱讀
示範用函式的第一個參數位置標註 this 型別，解決 DOM 事件處理常見的 this 型別問題，說明這個參數編譯後會消失、不算真正的引數，並解釋為何直接呼叫會失敗，得改用 bind、call、apply 提供正確的 this，也提到 noImplicitThis 編譯器選項與自由函式該不該依賴 this 的取捨。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #ThisType #NoImplicitThis #DOMEvents 2026-09-0717 分鐘閱讀
示範用 new 關鍵字寫出 construct signature 描述像 Date 這樣的建構子型別，並用 handleMainEvent 這個處理表單與 iframe 事件的函式，說明函式多載如何用多個函式頭綁定第一個參數與第二個參數的對應關係，避免混搭出不合理的組合，也點出多載頭必須跟底層實作相容的限制。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #ConstructSignature #FunctionOverloads #CallSignature 2026-09-0713 分鐘閱讀
用 push 方法實際回傳 number、卻能傳入型別是 void 的回呼參數為例，示範 () => undefined 為何報錯、() => void 卻能通過，說明 void 允許兩個值、跟只有一個成員的 unit type 不同，並釐清 void 當函式回傳型別與當回呼參數型別的語意差異。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #VoidType #UnitType #LiteralTypes 2026-09-0614 分鐘閱讀
示範用 interface 的 call signature（冒號）與 type alias 的箭頭語法（=>）替函式定義型別，並討論何時該選 interface、何時該選 type alias：函式庫傾向用可開放擴充的 interface，需要鎖死型別時則用 type alias。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #CallSignature #Interface #TypeAlias #OpenInterfaces 2026-09-0616 分鐘閱讀
示範用一個空的 DataTypeRegistry interface 搭配 keyof 與 declare module，讓 book、magazine 模組不改中央檔案就能註冊型別，fetchRecord 的參數因此自動長出 book | magazine，這個模式對函式庫作者開放使用者擴充型別特別有價值。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #TypeQueries #Keyof #DeclareModule #OpenInterfaces #NeverType #TypeRegistryPattern MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog