程式碼之外，還有生活的藝術 前端工程師 / 攝影 / 生活紀錄
- 文章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-08-3118 分鐘閱讀
用 car 物件與 printCar 函式，說明如何用大括號定義物件型別、用問號標記選擇性屬性，並示範型別守衛與窄化如何讓 number | undefined 在條件式判斷後安全變回 number，最後解釋多餘屬性檢查為何只針對物件字面量生效，以及用 spread operator 繞過檢查的實際效果。
2026-08-3114 分鐘閱讀
用 add 函式為例，說明沒有型別標註的參數為何會讓 any 型別的錯誤悄悄流過（例如誤把數字傳進只接受 callback 的 Promise 建構子），比較讓 TypeScript 自動推斷回傳型別跟顯式標註回傳型別在錯誤發生位置上的差異，並談 TypeScript 與 ESLint 的分工。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #FunctionTypes #TypeAnnotations #TypeInference #AnyType #ESLint 2026-08-3012 分鐘閱讀
延續上一篇的 casting 基礎，用 frontEndMastersFounding 日期實例，討論型別轉換的相容性邊界：為什麼字面值之間看似合理的轉型仍會被拒絕，如何用先轉 any 再轉目標型別的雙重轉型繞過檢查，這個逃生口適合用在什麼情境，以及為何 any 與 unknown 在這個技巧上完全等價。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #TypeCasting #TopType #LiteralTypes #AnyType #UnknownType 2026-08-3018 分鐘閱讀
用 let、const 宣告變數會如何影響 TypeScript 推斷出一般型別或字面值型別，說明變數型別一旦建立就固定不變，並解析型別轉換（casting）將型別轉為更寬泛或更精確型別的用途與風險，以及 as const 語法、變數未初始化時為何會出現 implicit any，最後示範用型別標註修正這個問題。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #TypeInference #LiteralTypes #ImplicitAny #TypeAnnotations #TypeCasting #AsConst 2026-08-2918 分鐘閱讀
示範用 TSC 編譯 TypeScript 專案，比較 target 設為 ES2015、ES2017、ES2022 時輸出的 JS 差異，說明編譯器如何用輔助函式（awaiter、classPrivateFieldGet）回退相容舊環境，並用 declaration 產生 d.ts 檔案。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #TSC #Tsconfig #DeclarationFiles #Downleveling #ModuleFormat 2026-08-2913 分鐘閱讀
講師 Mike North（Stripe principal staff engineer）說明 TypeScript 作為 JavaScript 語法超集的定位、編譯器與語言伺服器的角色分工，並用一個字串誤加數字的實例，解釋型別如何把原本只在執行期才會爆炸的問題提前搬到編譯期，讓工具在寫程式當下就攔住錯誤。
TypeScript Fundamentals
#frontendMasters #typescriptFundamentals #TypeScript #JavaScript #TypeSystem #TypeAnnotations #DuckTyping 2026-08-2812 分鐘閱讀
實際把前面講的 upstream 概念寫進 nginx.conf，列出兩台後端伺服器、把 proxy_pass 改指向伺服器叢集，並額外加一段自訂 log format，用 tail -f 即時觀察 access.log，驗證請求確實輪流分配到不同埠號的伺服器實例上，親眼看到負載平衡實際運作。
Full Stack Fundamentals
#frontendMasters #fullStackFundamentals #Nginx #LoadBalancing #Upstream #AccessLog #LogFormat #ProxyPass 2026-08-2714 分鐘閱讀
解釋容器協調（orchestration）在大規模部署下要解決的問題，帶出 Kubernetes 這類工具的角色，整理 round robin、least connections 等常見排程演算法的取捨，示範用 htop 觀察伺服器負載，並用 Nginx 的 upstream 設定把流量分配到多個容器實例。
2026-08-2718 分鐘閱讀
逐行拆解一個 Node.js 應用程式的 Dockerfile：為什麼用 Alpine 版基礎映像、建立 node 使用者並改變檔案擁有權、先複製 package.json 再裝套件，並用 docker build、docker run 把應用程式跑起來，同時開出多個埠號的容器實例，為下一節流量分配鋪路。
Full Stack Fundamentals
#frontendMasters #fullStackFundamentals #Docker #Dockerfile #AlpineLinux #DockerBuild #NonRootUser #LayerCaching #PortMapping 2026-08-2613 分鐘閱讀
拆解單體架構與微服務架構在團隊協作方式、技術棧選擇自由度上的優缺點取捨，解釋容器化跟虛擬化的差異：虛擬化把一整台實體伺服器切分成好幾個獨立區塊，容器則進一步把每個服務拆成各自獨立輕量的單位，說明容器怎麼做到零停機更新、跨作業系統自由移植，並帶出這門課為什麼選用 Docker 作為容器管理工具。
Full Stack Fundamentals
#frontendMasters #fullStackFundamentals #Container #Docker #Microservices #Monolith #Virtualization #ZeroDowntime #CloudComputing MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog