在 React v16.8 之前,React 需要使用 Class 來撰寫,這也讓很多人怯步,但從 React v16.8 推出了 React Hooks 後...
Async / Await 是 ECMAScript 8 ( ES2017 ) 引入的一個功能,它是建立在 Promise 之上的語法糖,允許我們使用 asyn...
在說明 Promise 前,首先我們要知道為什麼需要有 Promise。我們知道 setTimeout() 是屬於非同步的一種,如果我們需要第一個執行完成後才執...
null 和 undefined 代表著缺少值或未定義的狀態。儘管它們在 JavaScript 中也存在,但在 TypeScript 中,可以使用靜態型別檢查來...
在上一個章節中,我們知道如果函式沒有返回值的話,可以使用 void 型別,今天我們來比較 void 和 never 的不同的情境和用途,雖然它們看起來相似,但它...
在前面幾個章節中,應該或多或少都有看到函式在 TypeScript 中的寫法,它比 JavaScript 多了參數和返回值的型別設定,我們看一下函式基本的宣告方...
在前面的章節我們介紹了使用 interface 來聲明物件的結構和形狀,但如果我們是要接收從 api 上取得回來的資料 (我們使用 TDX 的觀光資訊 隨便其中...
在前面章節中,大家應該會很疑惑 type 和 interface 在很多方面都可以實現相似的功能,那我們應該要使用哪一種呢?下面來看看兩者存在了哪些區別: ty...
TypeScript 提供了多種內建的 Utility 型別,它是一組 內建的型別操作工具,可以幫助我們更輕鬆、更有效率地進行型別操作,今天威爾豬先介紹基本且常...
在 TypeScript 中,我們可以使用 interface 關鍵字來聲明自定義型別,用來描述物件的結構和形狀,以及物件應該具備的屬性和方法。我們可以使用 i...
在 TypeScript 中,我們可以使用 type 關鍵字來創建自定義的類型別名。它可以用來定義各種複雜的類型,使我們能夠更好地描述程式碼中的資料結構和變數類...
在昨天的範例中,應該有看到斷言的用法。斷言是一種告訴編譯器更多資訊的方式,用於 強制指定型別。有時候,編譯器可能 無法確定變數的精確型別,或者 當我們需要將某個...
any 和 unknown 是兩個用於處理 型別不確定的情況。雖然它們在某些情境下都可以用來處理不確定的值,但它們的用法和限制有所不同,我們一一來介紹: any...
Micro Services 是2014年大神Martin Fowler和James Lewis提出的概念在現今雲端化 容器化的web世界 已是家餘戶曉的主流架...
枚舉是 自定義一組具名常數值 的特殊型別,每個常數值都有一個名稱和一個關聯的數值,主要用於取值限定在一定的範圍內。在 TypeScript 中,我們使用 enu...
今天的內容是屬於 JavaScript 的範疇,但陣列方法不管在 JavaScript 還是 TypeScript 裡,都是滿重要的一個環節,所以威爾豬還是決定...
陣列 (Array) 陣列是一個包含元素的有序集合,元素可以是 相同型別 或 不同型別。在 TypeScript 中,我們可以使用 型別註記法 (型別[...
TypeScript 的型別大致分為下圖幾項,威爾豬會在之後章節陸續講,今天我們先談談最基本的三種數據型別。 在 TypeScript 中,基本型別註解都是以...
建立 tsconfig.json 為了更有效地管理 TypeScript 專案,我們會創建一個配置文件,這在各大打包工具裡安裝 TypeScript 後...
在開始學習和開發 TypeScript 專案之前,我們需要先進行環境的安裝和設置。威爾豬將一步步完成 TypeScript 的環境安裝,創建我們的第一個 Typ...
優點: JavaScript 存在,TypeScript 就存在 還記得昨天的圖嗎?因為 TypeScript 是建立在 JavaScript 之上的程...
相信各位前端人都一定聽過SEO,也都了解要讓SEO分數高才會讓網頁曝光率更高,甚至衍生出 SSR, SSG 這種概念,無非就是希望在 SEO 分數更高不過 SE...
就算已經參加過兩屆了,到了這一天還是會有「天啊,沒想到我終於走到終點了啊!」的感覺。 如果有讀過我的 「Day01 參賽前言」的讀者就會知道,我今年絕對擁有 一...
情境 z-index 可以幫助我們決定當元素重疊的時候,誰在上面,誰在下面。 那我們該如何使用 z-index 呢?首先,因為 z-index 只用於「重疊」的...
Github, Over Engineering 搜尋引擎會透過用戶指定 <title> ,以鐵人賽文章來說就是文章標題,用來產生搜尋結果的標題。...
本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...
情境 有時候我們會需要隱藏網頁上的元件。 舉幾個例子來說,例如我們為了使用者體驗的目的,我們希望在某某情境下,某些按鈕不要被使用者誤觸,或是為了畫面上排版的簡潔...
Github, Over Engineering 版型設計 這邊的設計確實讓人頭痛,作為搜尋引擎,你無法肯定用戶送出搜尋之後,回傳的資料集大小。假設有大量的資料...
Github, Over Engineering 設計 輸入欄位是我第一個設計撞牆的部分,光是其中的一個小部件就有很多眉角。 其中也沒有絕對正確的答案,很多都有...
情境 CSS 選擇器的分組,能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。 舉個例子來說,假設我們要讓兩個元素都改變顏色,不用分組選擇器的寫法會是這樣...