iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 1 留言 100 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 35 篇

技術 Day 35. 戰線擴張・命名空間 X 組織分明 - TypeScript Namespaces Introduction

閱讀本篇文章前，仔細想想看讀者認為目前對 TypeScript 編譯器的設定的了解程度如何呢？如果還沒理解完畢的話，可以先翻看最近這幾天的文章喔！...

Maxwell Alexius ‧ 2019-10-15

0 Like 0 留言 110 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 34 篇

技術 Day 34. 戰線擴張・專案語法 X 嚴格把關 - TypeScript Compiler Syntatic Checks Configurations

閱讀本篇文章前，仔細想想看前端的 Debug 技巧有哪些？編譯過後的檔案通常會有對應的 Source Map 檔，其中 Source Map 到底是在...

Maxwell Alexius ‧ 2019-10-14

0 Like 0 留言 53 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 33 篇

技術 Day 33. 戰線擴張・專案除錯 X 源碼對照 - TypeScript Compiler Debug Techniques

閱讀本篇文章前，仔細想想看如何確保出現錯誤時，防止 TypeScript 編譯器產出專案結果？描述 rootDir、outDir 與 outFile...

Maxwell Alexius ‧ 2019-10-13

0 Like 0 留言 56 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 32 篇

技術 Day 32. 戰線擴張・專案輸出 X 輸出設定 - TypeScript Compiler Output Configurations

閱讀本篇文章前，仔細想想看為何有些 ES6 的 Feature 諸如 Promise、Object.assign 等東西無法直接在 TypeScript...

Maxwell Alexius ‧ 2019-10-12

0 Like 0 留言 73 瀏覽

鐵人賽 Modern Web

讓 TypeScript 成為你全端開發的 ACE！系列第 31 篇

技術 Day 31. 戰線擴張・專案監控 X 編譯設定 - TypeScript Compiler Compile Configurations

恩... 照常 Day 31. 繼續。《戰線擴張》篇章概要本系列進入到第三部分：《戰線擴張》篇（The Front Line Expansion）筆者就...

Maxwell Alexius ‧ 2019-10-11

3 Like 1 留言 423 瀏覽

鐵人賽 Modern Web DAY 30

讓 TypeScript 成為你全端開發的 ACE！系列第 30 篇

技術 Day 30. 機動藍圖・流言終結者 X 重新認識物件的複合 - Favour Object Composition Over Class Inheritance

閱讀本篇文章前，仔細想想看已經熟悉類別的運作流程並懂得 OOP 的基礎概念。熟悉了策略模式（Strategy Pattern）嗎？如果還不清楚的話...

Maxwell Alexius ‧ 2019-10-10

0 Like 0 留言 91 瀏覽

鐵人賽 Modern Web DAY 29

讓 TypeScript 成為你全端開發的 ACE！系列第 29 篇

技術 Day 29. 機動藍圖・工廠模式 X 抽象工廠 - Factory Method & Abstract Factory Pattern Using TypeScript

閱讀本篇文章前，仔細想想看大致上已經了解抽象類別的運用性質與情境了嗎？另外本篇會延續前一篇的範例，除了可以參考前一篇外，筆者本篇會再進行簡單的敘述！...

Maxwell Alexius ‧ 2019-10-09

0 Like 0 留言 60 瀏覽

鐵人賽 Modern Web DAY 28

讓 TypeScript 成為你全端開發的 ACE！系列第 28 篇

技術 Day 28. 機動藍圖・抽象類別 X 藍圖基底 - TypeScript Abstract Class

閱讀本篇文章前，仔細想想看筆者列出到目前為止我們學到跟類別有關的名詞，可以回憶一下它們各自的定義以及實用的地方在哪裡～類別與物件的差別 Class v...

Maxwell Alexius ‧ 2019-10-08

0 Like 0 留言 60 瀏覽

鐵人賽 Modern Web DAY 27

讓 TypeScript 成為你全端開發的 ACE！系列第 27 篇

技術 Day 27. 機動藍圖・策略模式 X 臨機應變 - Strategy Pattern Using TypeScript. II

閱讀本篇文章前，仔細想想看大致上理解策略模式以及應用類別與介面進行實踐。另外本篇會延續上一篇的範例，因此沒有看過可以先翻看前一篇的文章喔！廢話不多說...

Maxwell Alexius ‧ 2019-10-07

0 Like 0 留言 81 瀏覽

鐵人賽 Modern Web DAY 26

讓 TypeScript 成為你全端開發的 ACE！系列第 26 篇

技術 Day 26. 機動藍圖・策略模式 X 選擇策略 - Strategy Pattern Using TypeScript. I

閱讀本篇文章前，仔細想想看類別繼承與介面綁定的差別在哪裡？能夠描述它們各自的優缺點嗎？如果還沒理解完畢的話，可以先翻看前一篇的文章喔！筆者本來沒有要...

Maxwell Alexius ‧ 2019-10-06

0 Like 0 留言 68 瀏覽

鐵人賽 Modern Web DAY 25

讓 TypeScript 成為你全端開發的 ACE！系列第 25 篇

技術 Day 25. 機動藍圖・類別與介面 X 終極的組合 - Ultimate Combo of Class & Interface

閱讀本篇文章前，仔細想想看試描述類別（Class）的型別推論機制與註記機制。繼承過後的子類別，試描述其類別推論機制與註記機制。子類別跟父類別的推論與...

Maxwell Alexius ‧ 2019-10-05

0 Like 0 留言 61 瀏覽

鐵人賽 Modern Web DAY 30

React.js 從【0】到【1】推坑計畫系列第 30 篇

技術【Last Day】完賽心得

沒想到就這樣成功完成鐵人挑戰了，這次是第一次參加，所以原先的目標就是能夠成功完賽，３０天其實還滿難的，尤其在原本沒有庫存文章的情況下，每天都要花大概1小時以上的...

老莫 Kyle ‧ 2019-10-04

0 Like 0 留言 61 瀏覽

鐵人賽 Modern Web DAY 24

讓 TypeScript 成為你全端開發的 ACE！系列第 24 篇

技術 Day 24. 機動藍圖・類別推論 X 註記類別 - Class Type Inference & Annotation

閱讀本篇文章前，仔細想想看大致上已經了解類別的基本用法與性質了嗎？ TypeScript 針對物件方面的型別推論與註記機制為何？如果還沒理解完畢的話...

Maxwell Alexius ‧ 2019-10-04

0 Like 0 留言 78 瀏覽

鐵人賽 Modern Web DAY 23

讓 TypeScript 成為你全端開發的 ACE！系列第 23 篇

技術 Day 23. 機動藍圖・私有建構子 X 單身狗模式 - Private Constructor & Singleton Pattern

閱讀本篇文章前，仔細想想看還記得存取修飾模式（Access Modifiers）有哪些嗎？你有想過 private 除了類別成員與類別的靜態屬性與方法...

Maxwell Alexius ‧ 2019-10-03

0 Like 0 留言 69 瀏覽

鐵人賽 Modern Web DAY 22

讓 TypeScript 成為你全端開發的 ACE！系列第 22 篇

技術 Day 22. 機動藍圖・特殊成員 X 存取方法 - TypeScript Class Accessors

閱讀本篇文章前，仔細想想看類別的靜態成員（Static Members）是什麼？與普通成員差異在哪？什麼情況下會採用靜態成員的設計呢？如果還沒理解...

Maxwell Alexius ‧ 2019-10-02

0 Like 0 留言 68 瀏覽

鐵人賽 Modern Web DAY 28

React.js 從【0】到【1】推坑計畫系列第 28 篇

技術【Day 28】React 的好搭檔 - Material UI && Recharts

鐵人賽進入尾聲了，基礎也都帶過了，最後就來介紹一些自己在寫 React 時常搭配的套件吧。 Material UI Material UI官網這個函式庫針對...

老莫 Kyle ‧ 2019-10-02

0 Like 0 留言 56 瀏覽

鐵人賽 Modern Web DAY 27

React.js 從【0】到【1】推坑計畫系列第 27 篇

技術【Day 27】Redux middleware - redux-thunk

還記得之前介紹過 redux 的基本用法嗎？因為覺得 React 基礎講的差不多了，今天決定回過頭來講講 redux middleware。 Redux-mi...

老莫 Kyle ‧ 2019-10-01

0 Like 0 留言 65 瀏覽

鐵人賽 Modern Web DAY 21

讓 TypeScript 成為你全端開發的 ACE！系列第 21 篇

技術 Day 21. 機動藍圖・靜態成員 X 即刻操作 - Static Properties & Methods

閱讀本篇文章前，仔細想想看如何使用類別的繼承（Inheritance）？為何我們設計類別的成員時，會儘量以 private 模式為基準？什麼時候該開放...

Maxwell Alexius ‧ 2019-10-01

0 Like 1 留言 71 瀏覽

鐵人賽 Modern Web DAY 26

React.js 從【0】到【1】推坑計畫系列第 26 篇

技術【Day 26】誰說一定要用別人寫好的 hooks - Custom Hooks

從介紹第一個 hooks 開始，我們都是在使用 React 提供的 hooks ，有沒有想過我們也可以實作自己的 hooks 呢？先來看看我找到的一段對 cu...

老莫 Kyle ‧ 2019-09-30

0 Like 0 留言 73 瀏覽

鐵人賽 Modern Web DAY 20

讓 TypeScript 成為你全端開發的 ACE！系列第 20 篇

技術 Day 20. 機動藍圖・類別繼承 X 延用設計 - TypeScript Class Inheritance

閱讀本篇文章前，仔細想想看描述類別存取修飾子（Access Modifiers）的功能與意義。為何類別要實踐某介面時，介面裡的所有規格在類別裡會直接綁...

Maxwell Alexius ‧ 2019-09-30

0 Like 0 留言 84 瀏覽

鐵人賽 Modern Web DAY 19

讓 TypeScript 成為你全端開發的 ACE！系列第 19 篇

技術 Day 19. 機動藍圖・存取修飾 X 藍圖規劃 - TypeScript Class Access Modifiers

閱讀本篇文章前，仔細想想看 TypeScript 類別（Class）的意義是什麼？ TypeScript 類別跟介面（Interface）的最大差別在哪裡...

Maxwell Alexius ‧ 2019-09-29

0 Like 0 留言 58 瀏覽

鐵人賽 Modern Web DAY 25

React.js 從【0】到【1】推坑計畫系列第 25 篇

技術【Day 25】useCallback - 學會把函式記起來

不知不覺來到第 25 天了，本來預計是要用小專案作結的，沒想到意外的忙碌啊，所以剩下的幾天就決定介紹一些我原本也不熟悉或不常使用的特性，學習的同時也盡量內化並記...

老莫 Kyle ‧ 2019-09-29

0 Like 0 留言 69 瀏覽

鐵人賽 Modern Web DAY 18

讓 TypeScript 成為你全端開發的 ACE！系列第 18 篇

技術 Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

閱讀本篇文章前，仔細想想看複合型別 union 與 intersection 的功能與意義代表為何？如果還沒理解完畢的話，可以先翻看前一篇文章喔！今...

Maxwell Alexius ‧ 2019-09-28

0 Like 0 留言 130 瀏覽

鐵人賽 Modern Web DAY 24

React.js 從【0】到【1】推坑計畫系列第 24 篇

技術【Day 24】 useRef

useRef 是一個可以讓我們抓取到 DOM 節點的 hooks。實作上非常簡單，直接來看範例吧： import React, { useRef } from...

老莫 Kyle ‧ 2019-09-28

0 Like 0 留言 56 瀏覽

鐵人賽 Modern Web DAY 23

React.js 從【0】到【1】推坑計畫系列第 23 篇

技術【Day 23】useMemo

昨天 React.memo 比較像是針對 component 做 memorization，今天要介紹的 useMemo 這個 hooks 則是可以對函式實作...

老莫 Kyle ‧ 2019-09-27

0 Like 0 留言 92 瀏覽

鐵人賽 Modern Web DAY 17

讓 TypeScript 成為你全端開發的 ACE！系列第 17 篇

技術 Day 17. 機動藍圖・複合型別 X 型別複合 - TypeScript Union & Intersection

閱讀本篇文章前，今天什麼都不用想！直接進入正文，快看下面！筆者就直接讓油門繼續摧下去～正文開始！筆者 O.S.：今天又是數學時間，要學好程式可真不...

Maxwell Alexius ‧ 2019-09-27

0 Like 0 留言 91 瀏覽

鐵人賽 Modern Web DAY 16

讓 TypeScript 成為你全端開發的 ACE！系列第 16 篇

技術 Day 16. 機動藍圖・介面與型別 X 混用與比較 - TypeScript Interface V.S. Type

閱讀本篇文章前，仔細想想看 TypeScript 的型別系統與介面之間在語法上的差別與介面或型別的使用有何共通點呢？但意義上又會差在哪？如果還沒理解完畢的...

Maxwell Alexius ‧ 2019-09-26

0 Like 0 留言 82 瀏覽

鐵人賽 Modern Web DAY 22

React.js 從【0】到【1】推坑計畫系列第 22 篇

技術【Day 22】React.memo

昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與前一次 state 來...

老莫 Kyle ‧ 2019-09-26

0 Like 0 留言 86 瀏覽

鐵人賽 Modern Web DAY 15

讓 TypeScript 成為你全端開發的 ACE！系列第 15 篇

技術 Day 15. 機動藍圖・功能多樣性 X 多樣性介面 - More on TypeScript Interface

閱讀本篇文章前，仔細想想看到目前為止對於 TypeScript Interface 介面的理解到什麼程度呢？你認為 TypeScript 和第三方套件...

Maxwell Alexius ‧ 2019-09-25

1 Like 0 留言 82 瀏覽

鐵人賽 Modern Web DAY 21

React.js 從【0】到【1】推坑計畫系列第 21 篇

技術【Day 21】React 渲染機制

我們都知道使用 React 讓我們的應用可以擁有非常好的效能，但背後裡 React 到底幫我們做了哪些努力呢？今天就來初探一下 React 的渲染機制！當我...

老莫 Kyle ‧ 2019-09-25

技術 Day 35. 戰線擴張・命名空間 X 組織分明 - TypeScript Namespaces Introduction

技術 Day 34. 戰線擴張・專案語法 X 嚴格把關 - TypeScript Compiler Syntatic Checks Configurations

技術 Day 33. 戰線擴張・專案除錯 X 源碼對照 - TypeScript Compiler Debug Techniques

技術 Day 32. 戰線擴張・專案輸出 X 輸出設定 - TypeScript Compiler Output Configurations

技術 Day 31. 戰線擴張・專案監控 X 編譯設定 - TypeScript Compiler Compile Configurations

技術 Day 30. 機動藍圖・流言終結者 X 重新認識物件的複合 - Favour Object Composition Over Class Inheritance

技術 Day 29. 機動藍圖・工廠模式 X 抽象工廠 - Factory Method & Abstract Factory Pattern Using TypeScript

技術 Day 28. 機動藍圖・抽象類別 X 藍圖基底 - TypeScript Abstract Class

技術 Day 27. 機動藍圖・策略模式 X 臨機應變 - Strategy Pattern Using TypeScript. II

技術 Day 26. 機動藍圖・策略模式 X 選擇策略 - Strategy Pattern Using TypeScript. I

技術 Day 25. 機動藍圖・類別與介面 X 終極的組合 - Ultimate Combo of Class & Interface

技術 【Last Day】完賽心得

技術 Day 24. 機動藍圖・類別推論 X 註記類別 - Class Type Inference & Annotation

技術 Day 23. 機動藍圖・私有建構子 X 單身狗模式 - Private Constructor & Singleton Pattern

技術 Day 22. 機動藍圖・特殊成員 X 存取方法 - TypeScript Class Accessors

技術 【Day 28】React 的好搭檔 - Material UI && Recharts

技術 【Day 27】Redux middleware - redux-thunk

技術 Day 21. 機動藍圖・靜態成員 X 即刻操作 - Static Properties & Methods

技術 【Day 26】誰說一定要用別人寫好的 hooks - Custom Hooks

技術 Day 20. 機動藍圖・類別繼承 X 延用設計 - TypeScript Class Inheritance

技術 Day 19. 機動藍圖・存取修飾 X 藍圖規劃 - TypeScript Class Access Modifiers

技術 【Day 25】useCallback - 學會把函式記起來

技術 Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

技術 【Day 24】 useRef

技術 【Day 23】useMemo

技術 Day 17. 機動藍圖・複合型別 X 型別複合 - TypeScript Union & Intersection

技術 Day 16. 機動藍圖・介面與型別 X 混用與比較 - TypeScript Interface V.S. Type

技術 【Day 22】React.memo

技術 Day 15. 機動藍圖・功能多樣性 X 多樣性介面 - More on TypeScript Interface

技術 【Day 21】React 渲染機制

At

技術【Last Day】完賽心得

技術【Day 28】React 的好搭檔 - Material UI && Recharts

技術【Day 27】Redux middleware - redux-thunk

技術【Day 26】誰說一定要用別人寫好的 hooks - Custom Hooks

技術【Day 25】useCallback - 學會把函式記起來

技術 Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

技術【Day 24】 useRef

技術【Day 23】useMemo

技術【Day 22】React.memo

技術【Day 21】React 渲染機制