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

• 文章298
• 標籤372

標籤查看更多

• #frontendMasters
• #JavaScript
• #deepJavaScriptFoundationsV3
• #javaScriptTheHardPartsV3
• #fullStackFundamentals
• #webPerformanceFundamentals
• #youMightNotNeedAFramework
• #TypeCoercion
• #advancedWebDevelopmentQuiz

分類查看更多

• Advanced Web Dev Quiz (27)
  • CORS Config 解析：Preflight、Credentials 與 Response Headers
  • 圖片格式完整比較：JPEG、PNG、WebP、AVIF 的壓縮、透明與色域差異
  • CSS Render Layer
  • 從 HSTS 看網站安全：理解 Strict-Transport-Security Header
  • CSS 選擇器：如何只選中第一個 <li> 元素
  • 理解 Set-Cookie 與 Cookie 的運作機制
  • CSS font-display 五種策略（auto/block/swap/fallback/optional）
  • XSS／CSRF／Clickjacking／MITM 名詞整理
  • HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
  • 理解 JavaScript Promise 方法：all、race、any、allSettled
  • 理解 JavaScript Generator 函式與 yield 運作原理
  • HTML rel 屬性：noopener 與 noreferrer 的差異及安全性應用
  • 理解 Web Vitals | 提升網站效能與使用者體驗的關鍵指標
  • JavaScript WeakMap 與 Map 的差異及實際應用
  • CSS 選擇器權重 | Specificity
  • JavaScript 事件傳遞機制：Capturing 與 Bubbling 的執行順序
  • CSS 動畫的渲染成本（Layout、Paint、Composite）
  • JavaScript 垃圾回收機制：理解 Mark and Sweep 演算法與記憶體管理
  • HTTP Cache：快取指令與應用
  • 從輸入網址到頁面載入：PerformanceNavigationTiming
  • JavaScript 展開運算子的淺拷貝陷阱：物件參考問題解析
  • 前端資源預加載：dns-prefetch、preconnect、prefetch、preload
  • 瀏覽器的呼叫堆疊與事件循環 | Call Stack & Event Loop
  • DNS 解析流程 | Resolving Domain Requests
  • 渲染流程與合成 | Rendering Pipeline & Compositing
  • async vs. defer
  • bfcache 是什麼？為什麼 unload 會讓頁面失去 bfcache 資格
• Deep JavaScript Foundations v3 (69)
  • 委派導向設計：從父子繼承到平行協作
  • OLOO：物件連結物件的設計模式
  • 原型繼承：`Object.create()` 與跨鏈方法查找
  • 原型遮蔽（Shadowing）與顯式偽多型
  • 原型鏈：物件之間的連結機制
  • 原型系統：連結而非複製
  • 自動綁定方法的代價：一個不應該存在的 hack
  • ES6 `class` 語法：繼承、`super` 與 `this` 綁定的陷阱
  • 箭頭函式的詞彙 `this`：物件不是 Scope，以及何時該用箭頭函式
  • 箭頭函式與詞彙 `this`：沒有自己的 `this` 的函式
  • 預設綁定：`this` 的第四種做法與總覽
  • `new` 關鍵字：第三種 `this` 綁定規則
  • 隱式綁定與明確綁定：`this` 的前兩種規則
  • `this` 關鍵字：由呼叫方式決定的動態上下文
  • ES6 模組語法：原生模組支援與 Node.js 的相容之路
  • 模組模式（Module Pattern）：用閉包實現封裝
  • 閉包關閉的是變數，不是值：迴圈閉包的常見陷阱
  • 閉包（Closure）：函式記憶自身範疇的能力
  • `let` 不提升？這個說法是錯的
  • 提升（Hoisting）：一個有用但不精確的比喻
  • `const`：被高估的宣告關鍵字
  • 明確的 `let` 區塊：縮短變數的生命週期
  • `var` 與 `let` 的語意分工：各自有其適當的位置
  • 區塊範疇：`let`、`const` 與 `var` 的適當使用場景
  • IIFE：立即調用函式表達式
  • 函式範疇的實際用途：最小暴露原則
  • 詞彙範疇的視覺化：氣泡模型與編譯期優化
  • 詞彙範疇：正式定義與動態範疇的對比
  • 箭頭函式：不是萬能替代品
  • 為什麼要命名函式表達式：三個不可迴避的理由
  • 函式宣告 vs 函式表達式：識別字屬於哪個範疇
  • 巢狀範疇 (Nested Scope)：向外查找的完整鏈
  • 詞彙範疇的邊界案例：遮蔽缺失與自動全域變數
  • 執行階段：變數查找與目標/來源位置
  • 編譯階段與範疇管理：彈珠桶子對話模型
  • 範疇（Scope）：JavaScript 的兩階段處理模型
  • TypeScript 的運算元型別驗證：被低估的功能
  • 自訂型別與函式參數的型別標註
  • TypeScript 與 Flow 的型別推斷與型別標註
  • TypeScript 與 Flow：靜態型別工具的優點與侷限
  • 相等性練習解析：`findAll` 的實作邏輯
  • 相等性練習：實作受控制的強制相等搜尋函式
  • 為 `==` 辯護：一個更強的論點
  • `==` 的使用準則：何時用、何時不用
  • `==` 與 Boolean 的角落案例：永遠不要用 `== true` 或 `== false`
  • `==` 演算法逐步走讀：數字與陣列的比較案例
  • `==` 演算法逐步解析：偏好數字、遞迴收斂
  • 強制相等性：`==` 的實際運作與 `null`/`undefined` 的特殊關係
  • `==` 與 `===`：兩者的真正差異
  • 強制轉型練習解析：`isValidName` 與 `hoursAttended`
  • 強制轉型練習：實作輸入驗證函式
  • 隱式轉型即抽象：選擇顯式還是隱式的判斷框架
  • 強制轉型的哲學：擁抱它，而非迴避它
  • 強制轉型的角落案例：所有問題的根源
  • Boxing：原始值存取屬性背後的隱式轉型
  • 強制轉型的實際案例：你已經在用它了
  • `ToBoolean` 抽象操作：falsy 清單與 truthy 的判斷邏輯
  • `ToNumber` 抽象操作：數值轉換的規則與陷阱
  • `toString` 抽象操作：值的字串化規則與角落案例
  • 抽象操作與 ToPrimitive：型別轉換的底層機制
  • 基本物件：JavaScript 的內建建構函式
  • `Object.is()` Polyfill 解題解析
  • 型別檢測練習：實作 `Object.is()` Polyfill
  • 負零：JavaScript 中被刻意隱藏的特殊值
  • NaN：無效數字與正確的檢測方式
  • 三種「空」：undefined、undeclared 與 uninitialized
  • BigInt：JavaScript 的大整數原始型別
  • `typeof` 運算子：辨識值的型別
  • JavaScript 型別系統：原始型別的正確定義
• Full Stack Fundamentals (47)
  • 實作 Nginx 負載平衡：upstream 放在 nginx.conf、自訂 log format 驗證流量分配
  • 容器協調與負載平衡概觀：Kubernetes 是做什麼的，Nginx upstream 怎麼分配流量
  • 寫第一個 Dockerfile：Alpine 基礎映像、node 使用者權限、COPY 快取順序、多實例部署
  • 容器化概觀：微服務 vs. 單體架構的取捨，容器與虛擬化的差異，為什麼這門課選用 Docker 管理容器
  • 在 Nginx 開啟 HTTP/2：一個關鍵字換來 Multiplexing，用 Network 面板驗證協定
  • 用 Certbot 免費幫網站裝上 HTTPS：snap 安裝、自動改寫 Nginx 設定、開放 443 埠
  • HTTP 請求與回應結構完整拆解：常見標頭、狀態碼分類，以及為什麼一定要改用 HTTPS 加密連線傳輸
  • SQLite 實作訪客紀錄：記憶體資料庫、建表、Prepared Statement、關閉連線的順序
  • 關聯式資料庫概觀：為什麼不能只把資料存成一個檔案，用資料表、主鍵、外鍵、JOIN 串接多張表查詢資料
  • 前端建立 WebSocket 連線：wss/ws 協定判斷、onmessage 接收訊息、部署到正式伺服器
  • WebSocket 與 HTTP 連線方式的差異、Nginx 加 Upgrade 標頭、建立 Express 伺服器
  • 建立子網域：新增 A 記錄、寫 Nginx 虛擬伺服器區塊指定 server_name，串接不同應用程式
  • Nginx 路徑重導向與 Gzip 壓縮：壓縮等級為什麼設 6 不設 9，圖片、音訊檔案為什麼壓不動
  • find 找檔案位置、grep 找檔案內容：兩個指令搭配 sudo !! 快捷技巧，快速排查系統問題
  • 讀 log 檔的正確工具：cat、tail -f 怎麼選，以及 POSIX 標準串流與重導向符號全解析
  • 用 cron 打造假 CI/CD：bash script 自動 git pull，crontab.guru 排程
  • CI/CD 是什麼：連續整合、連續交付與連續部署三個名詞的差異，為什麼測試才是核心而非推得更快
  • unattended-upgrades 安裝教學：Ubuntu 伺服器自動套用 LTS 更新，多數資安事件只是懶得補洞
  • chmod 數字背後的數學：read、write、execute 怎麼變成 4、2、1，以及最小權限原則
  • 用 UFW 設定防火牆：關閉不該開放的 3000 埠，以及 deny 與 reject 的關鍵差異
  • 什麼是連接埠（Port）：常見服務對應的埠號，用 nmap 掃描伺服器找出不該開放的 3000 埠
  • 伺服器被入侵之後能做什麼：偷走 GitHub 帳號、清空紀錄，為什麼唯一解法是砍掉重練，SSH 金鑰與防火牆缺一不可
  • Git 也是靠雜湊運作的：在伺服器上建一把 GitHub 專用金鑰，改用本機開發後 push、pull 就好
  • 寫出 Nginx 虛擬伺服器設定檔，用 nginx -t 驗證，並用 PM2 讓 Node 應用程式永遠活著
  • 安裝 Node.js、初始化專案，並用 Nginx proxy_pass 把請求轉給 Node 伺服器
  • Nginx 安裝與設定檔解析：為什麼需要反向代理，root、location、directive 結構全拆解
  • 用 chmod 644 修正 authorized_keys 權限並停用 root 登入：關閉伺服器最後一道安全破口
  • 別再用 root 登入伺服器：建立新使用者、加進 sudo 群組取得權限，並手動設定 SSH 金鑰讓新帳號能登入
  • 實際購買網域名稱：用 Namecheap 買下網域，設定 DigitalOcean 名稱伺服器與 A 記錄
  • DNS 是怎麼把網域轉成 IP 的：nslookup、dig 實測，以及 URL 結構與網域搶註爭議
  • TCP 與 UDP 差在哪：三向交握、封包、ICMP，以及 ping of death 攻擊的原理
  • 用 ping、traceroute、netstat 揭開網路請求背後的隱藏層：實際動手驗證架構怎麼運作
  • 網路是怎麼運作的：從網路卡、路由器、ISP 骨幹到伺服器的請求路徑，兼談 IP 位址與 IPv4、IPv6 差異
  • SSH 金鑰流程總複習：known_hosts 是什麼，以及用 SSH config 省去每次打 -i 的麻煩
  • 實作 SSH 金鑰登入：公鑰私鑰原理、ssh-keygen 產生金鑰，到連上 DigitalOcean 伺服器
  • SHA256 與 Salt 加鹽雜湊：為什麼密碼雜湊一定要加鹽，兼談 Bcrypt、加密貨幣與勒索軟體
  • SSH 金鑰為什麼比密碼安全：雜湊、字典攻擊與 MD5 彩虹表攻擊原理拆解
  • 作業系統怎麼選：Windows 與 Unix 的差異、Solaris／Linux／BSD 三大分支，以及三個組成部分
  • 實際購買一台 VPS：DigitalOcean Droplet 建立流程，地區與 Ubuntu LTS 作業系統怎麼選
  • 為什麼不能用自己的筆電當伺服器：雲端運算、虛擬化與 VPS 的關係
  • 從零把 Node.js 伺服器跑起來：Homebrew、NVM 與最陽春的 HTML 檔案
  • 伺服器到底是什麼：從概念定義到寫一個最陽春的 Node.js Server
  • Shell 是什麼：從 bash 到 zsh，設定開啟終端機時的問候語
  • 命令列迷路指南與 Vim 三種模式入門
  • 命令列練習解答：從基礎導覽指令到 man page 的使用習慣
  • 命令列入門：為什麼要學它，以及基本檔案操作指令
  • 什麼是 Full Stack 工程師：現代運算的三大支柱
• JavaScript Hard Parts v3 (50)
  • Private Static Fields：類別層級的私有共享資料
  • Private Instance Fields：真正的封裝
  • Public Instance Fields 的執行流程
  • `class` 的進階特性：`static` 方法與 Public Instance Fields
  • 解法三的問題與 `class` 語法糖：解法四
  • `new` 關鍵字的完整執行流程
  • 解法三：`new` 關鍵字與函式的雙重身份
  • 方法內的巢狀函式與箭頭函式的 `this` 綁定
  • `Object.prototype`：原型鏈的頂端
  • 原型鏈的運作機制與 `this`
  • 解法二：用原型鏈共享方法，避免記憶體浪費
  • 工廠函式：解決手動建立物件的第一種方法
  • Object Literal、Dot Notation、Object.create：三種建立物件的方式
  • 物件導向 JavaScript：OOP 的核心目標與原型鏈基礎
  • Promise 錯誤處理、AbortSignal 與非同步 JavaScript 總結
  • Microtask Queue：Promise 回呼的優先執行機制
  • 當 Callback Queue 遇上 Promise：執行順序追蹤
  • Promise 的運作機制：物件持久性、記憶體參照
  • ES6 Promises 與 fetch
  • ES5 Callback 模式的侷限，與 ES6 Promises 的登場
  • Event Loop：JavaScript 非同步執行的調度核心
  • Callback Queue 與執行規則：非同步回呼如何回到 JavaScript
  • Callback Function 與 Web Browser APIs 的運作原理
  • Promises、Async 與 Event Loop：為什麼 JavaScript 需要非同步機制
  • hint 參數、Symbol 本質與元程式設計
  • Symbol 與手動控制 ToPrimitive 強制轉換
  • ToPrimitive 強制轉換與 `@@toPrimitive` 隱藏屬性
  • Date 物件的隱藏屬性 `[[DateValue]]` 與方括號記法動態存取
  • JavaScript 記憶體模型：原始型別、Stack 與 Heap、物件參考比較
  • JavaScript 型別強制轉換三條路徑：ToNumber、ToString、ToBoolean
  • ToBoolean 強制轉換、寬鬆相等與嚴格相等
  • 加法運算子的例外：型別強制轉換規則與手動控制
  • JavaScript 型別強制轉換：運算子、ToNumber 與 DOM 字串
  • Closure 的實際應用：once、memoize、Iterator 與 Module Pattern
  • Closure：為什麼每次呼叫外層函式都是全新開始
  • Closure 獨立性與變數查找順序：同一函式的多個閉包互不干擾
  • JavaScript Closure 的真實樣貌：Scope、COVE 與詞彙作用域
  • JavaScript Closure 背包機制：私有狀態如何被保留
  • JavaScript Closure 與背包（Backpack）的運作機制
  • JavaScript Closure 的核心問題：變數存取由定義位置還是呼叫位置決定？
  • JavaScript 函式回傳函式：執行環境 (Execution Context) 與 Call Stack 運作解析
  • JavaScript Closure（閉包）：原理與核心應用
  • JavaScript 陣列變異方法與 ES2023 非變異替代方案（Pure Function、Side Effect）
  • 箭頭函式（Arrow Function）、匿名函式與 map 方法
  • JavaScript 一級函式與高階函式（Higher-Order Function）入門
  • 以 copyArrayAndManipulate 拆解高階函式 (Higher-Order Function) 的執行原理
  • JavaScript 執行上下文與高階函式：從重複程式碼到通用化設計
  • JavaScript 的 Higher-Order Functions：從 DRY 到函式作為參數
  • Call Stack 是什麼？理解 JavaScript 的呼叫堆疊機制
  • JavaScript 執行原理：執行緒、記憶體與執行環境（Execution Context）
• JS地下城 (5)
  • 幹嘛不自己上網查就好的 JavaScript 世界時鐘 | JS地下城 - 004
  • 不負責任的 JavaScript 計算機 | JS地下城 - 003
  • 俄羅斯方塊謎題 | JS地下城 - 番外篇 - 001
  • CSS、JS切個時鐘吧 | JS地下城 - 002
  • 用 JavaScript 切出九九乘法表 | JS地下城 - 001
• TypeScript Fundamentals (20)
  • TypeScript construct signature 與函式多載：用 new 描述建構子、用函式頭綁定參數關係
  • TypeScript void 型別：為什麼回呼參數要用 void 而不是 undefined
  • TypeScript callable 型別：用 call signature 替函式與回呼定義型別
  • TypeScript 型別註冊表模式：結合 keyof 與 declare module 打造可擴充的資料層
  • TypeScript 型別查詢：用 keyof、typeof 與索引存取型別，從既有值反推出型別定義
  • TypeScript 遞迴型別：用 NestedNumbers 描述無限巢狀陣列，不再需要 interface 搭配寫法
  • TypeScript interface：extends 建立繼承鏈，implements 定義類別必須遵守的契約
  • TypeScript 型別別名：取代冗長型別語法，用交集做子型別擴充，且比 interface 更有彈性
  • TypeScript 交集型別實戰：用 printEven 等函式驗證嚴格但通用的型別，兼談與聯集的不對稱關係
  • TypeScript 聯集型別實戰：型別別名、控制流程回傳值、tuple 屬性限制、instanceof 窄化與判別聯集
  • TypeScript 聯集與交集型別：用集合思維理解 | 和 & 的接受範圍與型別保證差異
  • TypeScript 結構型別 vs 名義型別：printCar 為什麼不管物件從哪裡來
  • TypeScript 陣列型別與 tuple：固定長度結構、readonly 保護與型別安全的落差
  • TypeScript 索引簽名：電話簿字典結構、已知欄位並存與 unchecked indexed access
  • TypeScript 物件型別與多餘屬性檢查：以 printCar 函式解析選擇性屬性與型別窄化
  • TypeScript 函式型別標註全解析：參數型別如何攔下 any 錯誤，回傳型別如何定位問題
  • TypeScript 型別轉換再探：相容性邊界、雙重轉型逃生口與 any 與 unknown 的選擇
  • TypeScript 變數宣告與型別推斷：let/const 差異、字面值型別與 implicit any
  • TypeScript 編譯實戰：tsconfig target/module 設定與宣告檔產生原理
  • TypeScript 入門筆記：JavaScript 語法超集定位、編譯器角色與編譯期抓錯的實例解析
• Web Performance Fundamentals (41)
  • 改善 INP：把工作切開，讓出主執行緒
  • 改善 CLS：版面尺寸提示
  • 改善回訪使用者體驗：瀏覽器快取策略
  • 改善 LCP：圖片壓縮、格式轉換與響應式圖片實作
  • 改善 LCP：使用 picture 元素實作響應式圖片
  • 改善 LCP：圖片格式與響應式圖片
  • 改善 LCP：Lazy Loading 與 Eager Loading
  • 改善 LCP：問題分析與三個策略
  • 改善 FCP：延遲載入非關鍵 JavaScript
  • 改善 FCP：資源預載（Preconnect 與 Preload）
  • 改善 FCP：移除依賴鏈
  • 改善 TTFB：伺服器容量、地理位置與 CDN
  • 改善 TTFB：HTTP 協議演進
  • 改善 TTFB：HTTP 壓縮
  • 改善效能的核心思維
  • 設定效能目標：認識你的真實使用者
  • 設定效能目標：三個決定「夠快」的力量
  • 設定效能目標：速度的心理學
  • 效能測試工具：Real User Monitoring（RUM）
  • 效能測試工具：Web Vitals Chrome 擴充功能
  • 效能測試工具：Chrome Performance
  • 效能測試工具：Chrome Lighthouse
  • 解讀效能資料：百分位數與 Lab vs Field Data 的正確用法
  • 效能資料的來源：Lab、Synthetic 與 Field Data
  • 效能指標的瀏覽器支援：Blink、WebKit 與 Gecko
  • 以程式碼收集效能指標：PerformanceObserver 與 web-vitals 套件
  • 以程式碼收集效能指標：Performance API 概覽
  • 其他效能指標：FCP（首次內容繪製）
  • 其他效能指標：TTFB（首位元組時間）
  • 已退役的指標：First Input Delay（FID）
  • Core Web Vitals：INP（互動到下一幀繪製）
  • 如何閱讀火焰圖（Flame Chart）
  • CLS 的邊界情況：哪些元素計入、viewport 範圍與 iframe 的處理
  • Core Web Vitals：CLS（累積版面位移）
  • Core Web Vitals 與 LCP（最大內容繪製）
  • 傳統指標的局限與 Core Web Vitals 的誕生
  • 傳統效能指標：DOMContentLoaded 與 Load 事件
  • 如何閱讀瀑布圖（Waterfall Chart）
  • 網頁效能為什麼重要：SEO 與線上廣告篇
  • 網頁效能與使用者體驗：關鍵數字與研究根據
  • 網頁效能是什麼？課程架構與範例應用總覽
• You Might Not Need a Framework (32)
  • Vanilla JS 在現代開發中的位置
  • 用 Proxy 實現雙向資料綁定，以及完成應用程式的最後修正
  • 完成購物車頁面：CartItem 與 OrderPage 元件，以及元件註冊的關鍵機制
  • 購物車邏輯與響應式徽章更新：Proxy、陣列不可變性與全域事件
  • DetailsPage 元件：複用既有模式與調試 dataset 命名
  • ProductItem 元件與事件目標判斷：event.target 與 event.currentTarget
  • 響應式渲染：監聽 Store 變動並動態產生選單 DOM
  • Proxy 與響應式程式設計：讓資料變動驅動 UI 更新
  • 為 Web Component 載入外部 CSS：Fetch API 與效能優化
  • 為 Custom Element 啟用 Shadow DOM：樣式封裝的實際效果
  • 在 Custom Element 中載入 Template：connectedCallback 與 Shadow DOM 的必要性
  • 建立第一個 Web Component：頁面元件的實作起點
  • Web Components 的 CSS 策略與常見問題釐清
  • Shadow DOM：Web Components 的樣式封裝機制
  • HTML Templates：在 DOM 中定義惰性的 HTML 片段
  • Web Components 與 Custom Elements：瀏覽器原生的元件化方式
  • 完成 Router：動態路由參數、popstate 監聽與瀏覽器歷史導覽
  • 實作 Router 的頁面渲染邏輯：切換路由與清除容器
  • 實作客戶端 Router：攔截連結、歷史紀錄與深度連結
  • SPA 路由原理：History API 與頁面切換的兩種策略
  • 建立 Services 層：API、Store 與 ES 模組系統
  • addEventListener 選項、移除事件與自訂事件
  • DOM 事件綁定：事件種類、命名規則與兩種綁定方式比較
  • DOMContentLoaded：初始化應用程式的正確時機
  • JavaScript 入口點與 script 載入策略
  • 在實際專案中操作 DOM：查詢範圍與效能意識
  • DOM 與 HTML 原始碼的差異：瀏覽器如何解析與補全結構
  • 操作 DOM 元素：屬性、樣式、事件與內容
  • 選取 DOM 元素：方法、回傳型別與操作能力
  • DOM 與 DOM API 基礎概念
  • Vanilla JS 的優勢與開發者的常見疑慮
  • 什麼是 Vanilla JavaScript？
• 學習經歷 (2)
  • 我該早點學的前端技術|不學無術也該有個限度
  • 線下不能群聚? 那線上總可以吧! 200人六角線上前端切版直播課程
• 生活亂談 (2)
  • Hi 👋 我是許文修 歡迎來到我的部落格
  • 《1917》最佳影片與導演獎熱門首選 | 電影雜談
• 程式筆記 (3)
  • 聰明的處理前端表單 | FormData API | handling-form-without-any-dependencies
  • Teachable 的 Sidebar 你的時辰到了 | Tampermonkey Userscript
  • gulp-gh-pages deploy 失敗QQ | 程式筆記 - 001

最新文章

混合 Dev 和 Life 的所有最新內容

298 篇

2025-05-093 分鐘閱讀

Hi 👋 我是許文修 歡迎來到我的部落格

這裡主要寫一些網頁前端相關的文章，主要是為了作為個人的紀錄留存用，「可能」會偶爾寫電影、音樂、遊戲類的文章，反正就是寫好玩的。有任何問題歡迎聯絡我!

生活亂談

#關於

2026-09-0717 分鐘閱讀

TypeScript construct signature 與函式多載：用 new 描述建構子、用函式頭綁定參數關係

示範用 new 關鍵字寫出 construct signature 描述像 Date 這樣的建構子型別，並用 handleMainEvent 這個處理表單與 iframe 事件的函式，說明函式多載如何用多個函式頭綁定第一個參數與第二個參數的對應關係，避免混搭出不合理的組合，也點出多載頭必須跟底層實作相容的限制。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #ConstructSignature #FunctionOverloads #CallSignature

2026-09-0713 分鐘閱讀

TypeScript void 型別：為什麼回呼參數要用 void 而不是 undefined

用 push 方法實際回傳 number、卻能傳入型別是 void 的回呼參數為例，示範 () => undefined 為何報錯、() => void 卻能通過，說明 void 允許兩個值、跟只有一個成員的 unit type 不同，並釐清 void 當函式回傳型別與當回呼參數型別的語意差異。

TypeScript Fundamentals

#frontendMasters #typescriptFundamentals #TypeScript #VoidType #UnitType #LiteralTypes

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

123456789101112131415161718192021222324252627282930

MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog