
## 什麼是 TanStack Query

在專案中，我們可以撰寫一個 `useHttp` 的 Custom Hook，來幫助自己複用 Try & Catch Error 與 Loading 等等操作，不過儘管我們花時間處理，仍會有些漏網之魚的功能或者小錯誤，而這些網路請求的處理全部都已經包裝在 TanStack Query 裡面，這大幅提升了 Developer Experience (DX)，讓身為開發者的我們生活得更加 Chill~

除此之外，TanStack Query 也包含了許多咱們 Developer 親自實作會相當複雜而且花時間的功能，例如：緩存功能 (Caching)。當使用者透過 Router 切換至新的畫面後，使用者返回前一個畫面可以不用再次獲取所有的資料，而是先使用 Web 記憶體中的儲存的資料，並且在背後撈取 API 再更新資料，這一切都已經由 TanStack Query 幫我們處理好了。

這麼香的東西，不裝嗎 d(`･∀･)b

## 安裝套件與配置 QueryClient

> [Installation | TanStack Query React Docs](https://tanstack.com/query/latest/docs/framework/react/installation)

```bash
npm i @tanstack/react-query
```

安裝完成後，我們只需要再做兩個步驟，就能完成 TanStack Query 的設定並解鎖所有功能了。

首先是透過 `QueryClient` 建立一個新的 Client 的實例 (Instance)，接著在要使用 TanStack Query 的元素外層包上 `<QueryClientProvider>`，通常會在 `<App>` 裡面包裝。

```jsx
import {
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';

// Create a client
const queryClient = new QueryClient();

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}
```

## useQuery Hook

首先介紹 TanStack Query 的 `useQuery` Hook，它會回傳該 Request 的 Data、Loading 與 Error 等資訊。

### useQuery 的參數

- `queryKey`：在陣列中放入一個 Key（不一定是字串，也可以是物件），Key 是用來記錄與辨識這個 HTTP Request 是哪個 API 請求的，由於 API 回傳結果會被 Cached，如果發送的是重複的 API Request 就會先使用過去儲存的回應結果
- `queryFn`：放上一個 Promise 函式，像是使用 Fetch API 或者 Axios 撈取資料的函式
- `staleTime`：同一個 Request 需要間隔的時間，預設為 0（例如：設定為 5000 就是在 5 秒內重複呼叫的話，第二次 API 不會被執行）
- `gcTime`：Garbage Collection Time，也就是緩存內容存留的時間，預設為 5 分鐘（例如：設定為 30000 就是半分鐘，也就是 30 秒後緩存的資料就會被丟棄）
- `enabled`：為 API 查詢加上條件判斷，例如：`searchTerm !== undefined` 得到 `true` 代表可以執行 API 呼叫，反之如果 `searchTerm` 為 `undefined` 的時候就會禁止使用這個 Query

### useQuery 的回傳結果

> 可使用解構方式提取值

- `data`：API 的回傳資料，一開始會回傳 Cached 的資料，等到 API 真正撈取後會在背景裡更新為新資料
- `isPending`：Request 是否還在進行中，是否已經取得了 Response 資料
- `isLoading`：與 `isPending` 類似，差異在於當此 Query 為 Disabled 狀態時，`isLoading` 會是 `false`，而 `isPending` 仍為 `true`
- `isError`：Response 是否有錯誤
- `error`：錯誤訊息

範例：

```jsx
import { useQuery } from '@tanstack/react-query';

function Example() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['exampleData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
      );
      return await response.json();
    },
  });

  if (isLoading) return 'Loading...';

  if (isError) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  );
}

export default Example;
```

### 如何為 queryFn 帶上參數

在 `queryFn` 中，其實 TanStack Query 為它默認自帶一個物件的參數，你可以從中拿到一些資訊，例如： `signal`，它可以用在 Fetch 或 Axios 上面，透過 `await axios(url, { signal: signal })` 等方式給予當下是否中止 API 呼叫的訊號。

如果想要給 `queryFn` 的函式傳參數，必須在函式帶上「具名」的參數，除了原有的 `signal` 以外，再加上自己要做為參數傳遞的內容，例如： `searchTerm`，透過 searchTerm 我們就可以為 API 呼叫帶上參數了。

```jsx
const { data, isPending, isError, error } = useQuery({
  queryKey: ['exampleData', { search: searchTerm }],
  queryFn: ({ signal }) => fetchData({ signal, searchTerm }),
});
```

## useMutation Hook

剛才介紹的 `useQuery` 是在取得資料，當我們想要做的是更新資料的操作就可以使用 `useMutation` Hook。

### useMutation 的參數

- `mutationFn`：跟 `queryFn` 不同，就算需要傳參數 `mutationFn` 也不用透過匿名函式進行包裝
- `onSuccess`：放一個匿名函式，在成功後執行裡面的動作

### useMutation 的回傳結果

- 一樣有 `isPending`、`isError`、`error` 等資料可以使用
- `mutate`：我們會用這個屬性來實際發送請求

範例：

```jsx
import { useNavigate } from 'react-router-dom';
// 引入 useMutation Hook
import { useMutation } from '@tanstack/react-query';

function NewEvent() {
  const navigate = useNavigate();

  // 使用 useMutation Hook
  const { mutate, isPending, isError, error } = useMutation({
    mutationFn: createNewEvent,
    onSuccess: () => {
      navigate('/home');
    },
  });

  // 將資料傳送給後端
  function handleSubmit(formData) {
    mutate({ event: formData }); // 這個 { event: formData } 參數是依照 API 要求的 Payload 格式
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <h1>New Event</h1>
        {isPending && <p>Submitting...</p>}
        {!isPending && (
          <>
            <button type="button">Cancel</button>
            <button type="submit">Create</button>
          </>
        )}
        {isError && <p>Failed to create event.</p>}
      </form>
    </>
  );
}

export default Example;
```

### QueryClient - Invalidate Queries

當在執行 `useMutation` 的 `onSuccess` 時，我們還可以透過 `queryClient.invalidateQueries()` 幫助我們告訴特定 `queryKey` 的 `useQuery` 它獲取的 `data` 已經是過時的，以要求它馬上進行更新。

```jsx
const { mutate, isPending, isError, error } = useMutation({
  mutationFn: createNewEvent,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['exampleData'] });
    navigate('/home');
  },
});
```

### Optimistic Updating - onMutate + onError + onSettled

到這邊，我們已經可以透過執行 `mutate` 去更新資料，並且在完成後透過 `onSuccess` 再次更新畫面，在這個過程中我們通常會加上一個 Loading 效果以等待所有操作完成。然而，在 UX 上我們還有一個更好的做法，那就是 Optimistic Updating。

簡單來說，就是在 API 資料回傳前，先本地更新畫面，讓使用者更快地看見更新結果，API 則在背景中運行。

在 TanStack Query 中，`onMutate` 就是指開始更新資料，但是尚未完成的時間點。因此，我們製作 Optimistic Updating 的方式，就是在 `onMutate` 時透過 `queryClient.setQueryData()` 去手動更新已緩存的 Query 資料。

另外，這邊還會先使用 `queryClient.cancelQueries()` 確保取消關於該 Key 的 `useQuery` 動作，再去進行 Optimistic Updating。

```jsx
const { mutate, isPending, isError, error } = useMutation({
  mutationFn: updateEventData,
  onMutate: async (data) => {
    const newEvent = data.event;
    await queryClient.cancelQueries({ queryKey: ['events', params.id] }); // 先確保取消所有此 Key 的查詢
    queryClient.setQueryData(['events', params.id], newEvent); // 手動更新此 Key 的緩存
  },
});
```

更完整一點的寫法，我們還可以在 `onMutate` 中透過 `queryClient.getQueryData()`取得緩存中的前一個結果並且放在 `return`中回傳，這個回傳資料可以在 `onError` 的 `context` 中拿到，我們可以把這個東西用來當作錯誤情況的退路。

最後的最後，我們在 `onSettled` 再加上 `invalidateQueries`，這麼做的用意，就是告訴 TanStack Query 不管我樂觀更新是成功或是失敗，都要再次重新查詢一次，確保後端資料庫的內容與前端畫面是一致的。

```jsx
const { mutate, isPending, isError, error } = useMutation({
  mutationFn: updateEventData,
  onMutate: async (data) => {
    const newEvent = data.event;

    await queryClient.cancelQueries({ queryKey: ['events', params.id] });
    const previousEvent = queryClient.getQueryData(); // 更新前的資料

    queryClient.setQueryData(['events', params.id], newEvent);

    return { previousEvent }; // 簡潔寫法
  },
  onError: (error, data, context) => {
    queryClient.setQueryData(['events', params.id], context.previousEvent); // 錯誤處理
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['events', params.id] });
  },
});
```


使用 TanStack Query 輕鬆處理 HTTP Requests


介紹順序會從 CSS 開始，最後提到 Framer Motion 的使用。許多情況下，我們或許不需要使用到 Framer Motion，而是使用 CSS 內建的 Transitions 與 Animations 就可以完成我們想要達到的效果。

## CSS Transitions

- CSS Transitions 可以讓你指定 CSS 屬性，讓它在兩個屬性值之間絲滑地切換

### 範例：旋轉圖標

CSS Transitions 常常被用在製作旋轉圖標上，許多下拉選單操作都會有一個三角形 ▲ 的圖標，我們可以為它加上 CSS 動畫效果，讓使用者點擊 ▲ 後會旋轉為一個倒三角形 ▼。

```jsx
// 假設已知我們有一個控制是否展開的狀態為 isExpanded
<div className={`item-details ${isExpanded ? 'expanded' : ''}`}>
  <button onClick={onViewDetails}>
    View Details <span className="item-details-icon">▲</span>
  </button>
</div>
```

在 CSS 裡把 `transition` 屬性加到要旋轉的圖標上面，這裡不要加在 `.item-details.expanded`，而是加在 `.item-details-icon` 上面，因為我們希望圖標不論是展開還是收合都能有旋轉的動畫效果。

```css
.item-details-icon {
  display: inline-block;
  font-size: 0.85rem;
  margin-left: 0.25rem;
  transition: transform 0.3s ease-out; /* CSS Transitions */
}

.item-details.expanded .item-details-icon {
  transform: rotate(180deg);
}
```

## CSS Animations

- CSS Animations 可以讓元素初始渲染時，執行自定義的 `@keyframes` 動畫

### 範例：卡片滑出效果

這個範例中，當 Modal 在關閉狀態時，Modal 並不存在於 DOM 之中，因此我們沒辦法使用 CSS Transitions 為它製作動畫效果，這種時候可以使用 CSS Animations 為 Modal 加上動畫。

```jsx
return (
  <>
    isShowModal && <Modal onDone={handleDone} />
  </>
);
```

當 Modal 開啟時，就會執行我們在 `@keyframes` 定義的 `slide-up-fade-in` 動畫效果，Modal 會從一開始的 `opacity: 0` 浮現到 `1`，同時位置也會透過 `translateY` 從下方 `30px` 的位置往上移動到 `0px`。最後的 `forwards` 則是指希望元素在動畫完成後，保留在動畫結束的狀態。

```css
.modal {
  top: 10%;
  border-radius: 6px;
  padding: 1.5rem;
  width: 30rem;
  max-width: 90%;
  z-index: 10;
  animation: slide-up-fade-in 0.3s ease-out forwards;
}

@keyframes slide-up-fade-in {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
```

## Framer Motion

- 強大且效果自然的 React 動畫效果 Library

安裝 Framer Motion 之後，可以引入 `motion` 並且選用它包裝過後的 HTML 元素像是 `motion.div`，準備完成後，我們就可以開始為元素加上動畫了。

```jsx
import { motion } from 'framer-motion';

function App() {
  return <motion.div />;
}
```

可以通過以下屬性，為元素加上動畫：

- `initial`：元素加入 DOM 時，為將要執行的動畫加上「初始」值
- `animate`：指定要「執行」動畫的屬性與目標值
- `exit`：從 DOM「刪除」該元素時，希望顯示的動畫效果
- `transition`：動畫執行的細節設定，可以設置 `duration`、`type`、`stiffness` 等等
- `AnimatePresence`：延緩內部元件從 React Tree 中消失，等到動畫完成才真正地移除 DOM
- `whileHover`：whileXxx 定義的動畫效果，會在 Tapping 或者 Hovering 等時候執行
- `variants`：建立變數方便複用效果

> 更多詳細內容可以參考 [Framer Motion 官方文件](https://www.framer.com/motion/)

### 範例：位移效果

這個範例中，我們根據不同欄位的輸入值，讓方塊執行移動或旋轉動畫。

```jsx
import { motion } from 'framer-motion';

function App() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [rotate, setRotate] = useState(0);

  return (
    <motion.div
      animate={{ x y, rotate }}
      transition={{
        duration: 0.5,
        // debounce: 0 ~ 1, // Bouncing 程度 (0 = 無彈跳, 1 = 非常彈跳)
        type: 'spring', // 'spring', 'tween'
      }}
    />
  );
}
```

### 範例：取代 CSS Animations 完成卡片滑出效果

這個範例我們透過 `initial` 與 `animate` 這兩個屬性，讓 Modal 加入到 DOM 之後，從初始值執行動畫到指定的目標值，以完成由下往上滑出卡片的動畫效果。

除此之外，我們還可以加上 `exit` 為 DOM 移除的動作也加上動畫效果。也因此還必須加上 `<AnimatePresence>` 來包裝這個 Modal，讓 Framer Motion 確保這個元素已經執行了退出動畫才從 DOM 中移除 Modal。

```jsx
import { motion, AnimatePresence } from 'framer-motion';

function App() {
  return (
    <AnimatePresence>
      <motion.dialog
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 30 }}
        open
      />
    </AnimatePresence>
  );
}
```

最後，再稍微講一下 `variants` 的用法，它可以為一個動畫效果建立一個變數，命名後可以讓你更方便複用這個效果。

舉例來說，剛剛的 Modal 就可以改為以下寫法，讓 Modal 的動畫效果看起來更好理解與管理。

```jsx
import { motion, AnimatePresence } from 'framer-motion';

function App() {
  return (
    <AnimatePresence>
      <motion.dialog
        variants={{
          hidden: { opacity: 0, y: 30 },
          visible: { opacity: 1, y: 0 },
        }}
        initial="hidden"
        animate="visible"
        exit="hidden"
        open
      />
    </AnimatePresence>
  );
}
```


為你的 React Apps 加上動畫效果


## Higher Order Component (HOC)

- HOC 是一個函式，帶入一個元件作為參數，並回傳一個加強版的元件
- 使用 HOC 的目的，是將共用的邏輯放在 HOC 中，變動的部分由帶入的元件的 Props 和 State 傳入
- 做到元件的重用 (Reuse)，讓開發者不用撰寫相似的程式碼
- 舉例：`connect()` 就是一個 HOC

以下我們來實作一個簡單的 HOC，幫助理解 HOC 的概念。

首先，我們有兩個主角，分別是 `Person1` 與 `Person2` ，他們的程式碼定義與功能幾乎都一樣，所以這裡我就只放 `Person1` 的 JSX。

```jsx
import React, { useState } from 'react';

function Person1() {
  const [money, setMoney] = useState(10);

  const handleIncrease = () => {
    setMoney(money * 2);
  };

  return (
    <div>
      <h1>Person 1</h1>
      <p>Money: {money}</p>
      <button type="button" onClick={handleIncrease}>
        Increase
      </button>
    </div>
  );
}

export default Person1;
```

今天我們希望對這兩個人的 Money 數量做增加，然而 `Person1` 與 `Person2` 兩個元件都有 `money` 狀態以及 `handleIncrease` 函式，會造成重複撰寫相同程式碼的情況。因此，當兩人執行功能類似時，我們就可以撰寫一個高階元件，同時去滿足這兩個元件的需求。

1. 我們新增一個 HOC 名為 `UpdatedComponent`，它會傳入一個參數就是原本的元件（在此稱它為 `OriginalComponent`）
2. `UpdatedComponent` 最後會回傳一個新的元件 `NewComponent`，新的元件只是負責把傳入的舊元件做加強之後就回傳

以上步驟也就是 HOC 的基本概念與流程。

```jsx
import React, { useState } from 'react';

function UpdatedComponent(OriginalComponent) {
  function NewComponent() {
    const [money, setMoney] = useState(10);
    const handleIncrease = () => {
      setMoney(money * 2);
    };
    return <OriginalComponent handleIncrease={handleIncrease} money={money} />;
  }

  return NewComponent;
}

export default UpdatedComponent;
```

完成 HOC 的撰寫後，原本的 `Person1` 與 `Person2` 就不需要再撰寫 State 與 Function 了，取而代之的是可以從 Props 得到 HOC 給予的 `money` 與 `handleIncrease`。

並且在最後是回傳一個 `UpdatedComponent`，因為這樣原本的元件 `Person1` 與 `Person2` 才能取得到 Props。

```jsx
import React from 'react';
import UpdatedComponent from './HOC';

function Person1({ handleIncrease, money }) {
  return (
    <div>
      <h1>Person 1</h1>
      <p>Money: {money}</p>
      <button type="button" onClick={handleIncrease}>
        Increase
      </button>
    </div>
  );
}

export default UpdatedComponent(Person1);
```

最後在使用時，只要在 JSX 渲染 `<Person1>` 與 `<Person2>`，就可以使用 HOC 同時去管理這兩個元件囉！

## 回顧

高階元件的概念，可以讓同樣功能的 State 與 Function 更好地被重複應用。

- Higher Order Component (HOC)


React Code Reuse - Higher Order Component (HOC)


## Get Started

這一部分涵蓋了 TypeScript 的入門和基本概念。可能會涉及以下主題：

- Using Types：介紹基本的 TypeScript 型別概念
- Type Assignment and Type Inference：解釋型別指定和型別推斷

> 💡 The key difference: JavaScript uses “dynamic types” (resolved at runtime), TypeScript uses “static types” (set during development)

## TypeScript Basics

這一部分主要介紹 TypeScript 的基本語法和結構，包括基本的 JavaScript 型別和 TypeScript 特有的型別：

- Numbers, Strings and Booleans：基礎的型別

  ```tsx
  let name: string = 'John';
  let age: number = 25;
  let isStudent: boolean = true;

  function greet(person: string): string {
    return `Hello, ${person}!`;
  }

  console.log(greet(name));
  ```

- Object Types：對象型別
- Array Types：陣列型別
- Tuples：元組

  - 元組的長度是固定的，不可隨意增加或刪除元素
  - 元組中元素的型別和順序必須符合定義
  - 在使用元組時，TypeScript 編譯器會檢查型別和順序，以確保符合定義

  ```tsx
  // 定義一個元組，包含兩個數字
  let point: [number, number] = [1, 2];

  // 定義一個包含名字和年齡的元組
  let person: [string, number] = ['Alice', 25];
  ```

- Enums：枚舉。枚舉的優點包括：

  - 可讀性：使用描述性的名稱代替數字或字串，可以使代碼更容易理解
  - 可維護性：當需要改變常量值時，只需修改枚舉的定義，避免在代碼中到處查找和修改
  - 防止錯誤：使用枚舉可以減少使用非預期值的風險

  ```tsx
  enum Direction {
    NORTH = 'N',
    EAST = 'E',
    SOUTH = 'S',
    WEST = 'W',
  }

  console.log(Direction.NORTH); // 輸出："N"
  ```

  > 當定義枚舉時，常見的做法是使用駝峰命名法來定義枚舉的名稱，而使用全大寫來定義枚舉的常量值。這樣做可以在代碼中清楚地標識枚舉的值和其他變數，增強可讀性，有助於區分與普通變數的差異。然而，這不是嚴格規定的規則，而是一種慣例。

- The Any Type：任意型別
- Union Types：聯合型別

  - Union Types 用 `|` 符號將多個型別聯合起來，表明參數可以是其中之一

  ```tsx
  function printValue(value: number | string): void {
    if (typeof value === 'number') {
      console.log(`The number is ${value}`);
    } else {
      console.log(`The string is '${value}'`);
    }
  }

  printValue(42); // 輸出：The number is 42
  printValue('Hello'); // 輸出：The string is 'Hello'
  ```

- Literal Types：字面量型別

  - Literal Types 允許你使用特定的值作為型別，而不僅僅是使用更通用的型別（如 `number` 或 `string`）
  - 定義一組固定的可能值，並限制其他值的使用

    例如，如果你要定義一個代表方向的變數，它只能是 "north"、"south"、"east" 或 "west"，可以使用字面量型別來限定可能的值：

  ```tsx
  type Direction = 'north' | 'south' | 'east' | 'west';

  function move(direction: Direction): void {
    console.log(`Moving in the ${direction} direction`);
  }

  move('north'); // 輸出：Moving in the north direction
  // move('up');  // 錯誤：'up' 不是有效的方向
  ```

- Type Aliases：型別別名

  - 別名可以指向基本型別、聯合型別、元組型別、函數型別，甚至更複雜的結構

  ```tsx
  type Name = string; // 給 string 型別取個別名
  type StringOrNumber = string | number; // 聯合型別
  type Direction = 'north' | 'south' | 'east' | 'west'; // 字面量型別
  // 物件型別別名
  type Person = {
    name: string;
    age: number;
  };
  ```

- Function Return Types and Void：函數返回型別和空型別

  - 在函數定義中指定函數應返回的型別。這有助於確保函數的返回值符合預期，並允許 TypeScript 編譯器進行型別檢查
    例如，下面是一個返回數字的函數，它明確指定了返回型別為 `number`：

    ```tsx
    function getSquare(num: number): number {
      return num * num;
    }

    const result = getSquare(5); // 25
    ```

  - `void` 型別用於表示函數沒有返回值。這在定義那些不需要返回特定值的函數時非常有用，如事件處理器、日誌記錄函數等

    ```tsx
    function logMessage(message: string): void {
      console.log(message);
    }

    logMessage('Hello, TypeScript');
    ```

- Function Types and Callbacks：函數型別與回呼

  - 函數型別（Function Types）用於指定一個函數的參數和返回值的型別

    ```tsx
    // 定義一個接受兩個數字參數並返回數字的函數型別
    type MathOperation = (a: number, b: number) => number;

    // 使用函數型別
    const add: MathOperation = (x, y) => x + y;
    const subtract: MathOperation = (x, y) => x - y;

    console.log(add(5, 3)); // 8
    console.log(subtract(5, 3)); // 2
    ```

  - 回呼函數（Callbacks）是函數型別的一個常見應用。它們允許你將函數作為參數傳遞，並在某些事件或操作完成後調用。
    例如，定義一個回呼函數型別，用於處理事件：

    ```tsx
    // 定義一個函數型別，接受一個字串參數且沒有返回值
    type EventCallback = (event: string) => void;

    // 使用回呼函數
    function triggerEvent(callback: EventCallback, eventName: string): void {
      console.log(`Triggering event: ${eventName}`);
      callback(eventName); // 呼叫回呼函數
    }

    const handleEvent: EventCallback = (event) => {
      console.log(`Event handled: ${event}`);
    };

    triggerEvent(handleEvent, 'ClickEvent');
    ```

    在這個例子中，`EventCallback` 是一個回呼函數型別，定義了它接受一個字串參數且沒有返回值。這種回呼機制在事件驅動程式和異步操作中非常常見。

- The Unknown Type：未知型別

  - `unknown` 型別表示一個變數可能是任何型別
  - 它是比 `any` 更嚴格的通用型別，因為在使用 `unknown` 型別時，需要執行型別檢查或斷言，才能將其轉換為其他型別
  - `unknown` 的使用場景包括從外部來源接收數據、處理不確定的值、或者在函數中接受多種可能的參數

  ```tsx
  let value: unknown;

  value = 42; // 可以是數字
  value = 'Hello'; // 也可以是字串

  // 不能直接將 unknown 型別賦值給其他具體型別
  let name: string;
  // name = value;  // 錯誤，因為 unknown 不能直接賦值

  // 必須執行型別檢查
  if (typeof value === 'string') {
    name = value; // 這時可以賦值，因為已確定是字串
  }
  ```

  在這個例子中，我們使用 `unknown` 表示一個不確定型別的變數。要將 `unknown` 轉換為具體型別，需要執行型別檢查或型別斷言。

- The Never Type：永不型別

  - `never` 型別表示一個函數或表達式永遠不會有返回值，通常是因為它會拋出異常、進行無限循環、或呼叫 `process.exit()` 這類終止程序的操作
  - `never` 型別常見於以下幾種情況：

    - 函數拋出異常：當函數永遠不會正常返回，因為它總是拋出異常
    - 無限循環：當函數進入無限循環而不會退出
    - 編譯器不應該到達的地方：通常用於確保代碼的完整性

  ```tsx
  // throwError 總是拋出異常
  function throwError(message: string): never {
    throw new Error(message); // 總是拋出異常
  }

  // infiniteLoop 進行無限循環
  function infiniteLoop(): never {
    while (true) {
      // 這是一個無限循環
    }
  }

  // assertNever 用於在 switch 語句中處理不可能的情況
  function assertNever(x: never): never {
    throw new Error('Unexpected value: ' + x);
  }

  type Shape = 'circle' | 'square' | 'triangle';

  function getShapeArea(shape: Shape): number {
    switch (shape) {
      case 'circle':
        return Math.PI * 5 * 5; // 圓形面積
      case 'square':
        return 25; // 正方形面積
      case 'triangle':
        return 10; // 三角形面積
      default:
        assertNever(shape); // 處理不可能的情況
    }
  }
  ```

## Compiler & Configuration Deep Dive

`tsconfig.json` 是 TypeScript 專案的配置文件，用於指定編譯器選項、項目文件、型別檢查等。

基礎的 `tsconfig.json` 配置主要涉及編譯器選項、文件包含與排除，以及編譯目標等，以下是一些基礎選項的簡單說明。

### Compiler Options

- `target`：指定編譯後的 JavaScript 版本，例如 `ES5`、`ES6`、`ES2020` 等，這個選項決定了生成的 JavaScript 代碼的兼容性
- `module`：指定模組系統，如 `CommonJS`、`ES6`、`AMD` 等，這個選項決定了模組的使用方式。
- `strict`：開啟嚴格模式，包含一系列嚴格的型別檢查設定，這是建議的配置，能夠增強型別安全性
- `outDir`：指定編譯後輸出的目錄，這個選項決定編譯後的文件位置
- `rootDir`：指定源代碼的根目錄，這可以確保正確的目錄結構
- `sourceMap`：啟用或禁用源地圖，用於在調試時映射到原始 TypeScript 源碼
- `declaration`：生成 TypeScript 的聲明文件（`.d.ts`），用於外部型別定義
- `removeComments`：在編譯後移除註釋
- `noImplicitAny`：如果變數未指定型別，則不允許默認為 `any`。這是一個嚴格模式的選項

### File Inclusion and Exclusion

- `include`：指定要包含在編譯中的文件或目錄，例如：`["src//\*"]` 表示包含 `src`\*\* 目錄及其子目錄的所有文件
- `exclude`：指定不包含在編譯中的文件或目錄，例如：`["node_modules", "dist"]`

```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "declaration": true,
    "removeComments": true,
    "noImplicitAny": true
  },
  "include": ["src//*"],
  "exclude": ["node_modules", "dist"]
}
```


[Note] TypeScript Course for Beginners - Learn TypeScript from Scratch!


## Next Project Structure

### Pages

首先，我最喜歡的 Next.js Feature 也就是 File-System Based Router 在這次升級後活得好好的，不過運作方式有一些不同。

在 App Router 下，被命名為 `page.js` 的檔案才會被視為一個路由頁面的元件。

```jsx
app
├─ about
│   └─ page.js // our-domain.com/about
├─ blog
│   └─ page.js // our-domain.com/blog
├─ [slug]
│   └─ page.js // our-domain.com/anything-else
└─ page.js     // our-domain.com/
```

> 上述範例中，Dynamic Route 優先級較低，而擁有具體命名的路由優先級比較高，所以並不會產生衝突。

### Favicon

Next 14 提供了一項便利的設定，就是在 `/app` 這一層當中，被命名為 `icon` 的圖片檔案會直接被視為該網站的 Favicon。

除此之外還有更多的 File Conventions，像是創建對應名字的元件，默認就會被拿去做相對應的功能，例如 [error](https://nextjs.org/docs/app/api-reference/file-conventions/error#error) 與 [not-found](https://nextjs.org/docs/app/api-reference/file-conventions/error#not-foundjs) 等頁面。

### Root Layout (Required)

現在的路由資料夾 `/app` 底下「一定」要有一個 Layout，這在 App Router 版本是必要的。而內層的嵌套路由如果也新增 Layout，Root Layout 跟內層 Layout 兩個會同時作用。

除此之外，在寫法上 Root Layout 必須要包含 `<html>` 與 `<body>` 這兩個標籤。

```jsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  );
}
```

### Folder Structure

在 Next 14 中，專案資料夾結構的組成可以有許多種，官方文章 [Project Organization and File Colocation](https://nextjs.org/docs/app/building-your-application/routing/colocation) 裡面也有列出所有的架構方式，可以詳細查閱。

對我而言，我自己偏好將 `components` 資料夾獨立於 `app` 之外，也就是在 Root 底下同層有 `app` 與 `components` ，因為我希望 `app` 這個資料夾就是專門在處理「路由」相關的任務，不處理其它元件。

```jsx
project
├─ app
│   ├─ blog
│   │   └─ page.js
│   └─ page.js
└─ components
    └─ ...
```

關於這個架構方式，在官方文檔裡的 [Store project files outside of app](https://nextjs.org/docs/app/building-your-application/routing/colocation#store-project-files-outside-of-app) 也有描述到，不過選擇哪種架構方式都可以，這只是個人喜好而已。

## React Server Components (RSC)

### Why RSC

- 透過 CRA 或 Vite 所建構的普通 React App，所使用的是 Client Components，這些程式碼是在 Client Side 執行
- 透過 Next.js 所建構的 Next App，會預設所有的 React Components 都是 RSCs，這些程式碼是在 Server Side 執行

在 Next.js 裡面，你的元件其實是在 Server Side 先處理完 JSX 程式碼後，再將 HTML Code 返回給 Client Side 去做呈現的。

舉例來說，你可以直接在 Function Components 裡面執行 `console.log`，這段 Log 會出現在 Backend Terminal，而非前台瀏覽器的主控台。

那麼...這麼做有什麼好處嗎？

![Sponge Bob](https://media3.giphy.com/media/myPdoRAlad0J2/giphy.gif?cid=7941fdc6b880zac1akf55nd3ois460wv36exkryo6xkkxzhm&ep=v1_gifs_search&rid=giphy.gif&ct=g)

還真的有！

通過 RSC 的方式，客戶端需要下載的 JavaScript 就會減少，因此可以提高網站的性能。

同時，RSC 也更適合搜尋引擎優化 (SEO)，因為爬蟲可以看到完整的頁面內容，相較於 CRA 建立出來的 APP，Next.js 專案的 Source Code 不再是空頁面了。

### Use Client

雖然 RSC 很不錯，但是預設 RSC 會讓我們無法使用 Client Side 的一些功能來製作元件，像是 React 的 `useState` Hook、Next.js 的 `usePathname` Hook，或者 Event Handler `useEffect`...等等，這個時候只要在元件頂部加上 `'use client'` 就可以了！

在使用 `'use client'` 時可以盡量用在最小的元件上，例如：大元件中只有一小部分需要借助 Client Side 的功能的話，就可以抽離出來製造成小元件，只為小元件指定 `'use client'` 在客戶端運行，而不是讓整個大元件都失去 RSC 的優勢。

### Async Server Components

除此之外，RSC 還可以加上 `async`，它會回傳一個 Promise，渲染時 RSC 會等到 Promise 解析完畢才將 HTML 內容送回瀏覽器。

```jsx
export default async function AsyncPage() {
  const data = await getData();

  return (
    <div>
      <h1>Async Page</h1>
      <DataGrid data={data} />
    </div>
  );
}
```

### 透過 Suspense 製作 Loading 效果

Suspense 是 React 提供的元件，我們可以用它包住剛剛的 Async RSC，這樣 Async RSC 在完成渲染之前，就會先顯示 `fallback` 所傳入的 UI 內容，用以替代載入完成前的畫面。

```jsx
export default async function AsyncPage() {
  const data = await getData();

  return (
    <div>
      <h1>Async Page</h1>
      <Suspense fallback={<p>Fetching Data...</p>}>
        <DataGrid data={data} />
      </Suspense>
    </div>
  );
}
```

### Server Actions (Use Server)

我們看過 `'use client'` 可以將元件限制為 Client Side，那麼其實也有另一個 `'use server'` ，這是用於將 Function 限制在 Server Side 時運行。

需要特別注意，如果當前的元件已經透過 `'use client'` 指定為 Client Side，則同個元件檔案內的 Function 就不能再被指定為 `'use server'` ，這會導致 Next.js 無法進行判斷。

解決方法是新建一個檔案，在頂部指定 `'use server'`，這樣這個檔案中的所有函式就都會是 Server Actions，這時候再從 Client Side 的 Component 匯入這個 Server Action 就不會出現錯誤哩。

> 貼心提醒：如果你要使用 Server Action 將表單資料儲存在 Local 的話（像是透過 [better-sqlite3](https://github.com/WiseLibs/better-sqlite3) 這種輕量的 SQL 資料庫套件），建議你再多安裝 [xss](https://github.com/leizongmin/js-xss) 這個套件，讓它先幫你刪除任何有害的內容後，再去將資料存到本地的資料庫。


Next.js v12 到 v14 版本升級紀錄！有何不同？


## 什麼是 API Routes

Next.js API Routes 是 Next.js 框架中用來處理 API 請求的一個特殊目錄，透過 API Routes，我們可以用非常簡單的方式創建 API。

首先。這些 API Routes 的檔案必須位於專案的 `pages/api` 目錄下，Next.js 會將它們視為 API Endpoints 而非 Pages。

此外，這些檔案與程式碼都只會執行在 Server Side，並不會打包到 Client Side 的 Bundle 裡面。就如同 “getStaticProps” 與 “getServerSideProps” 裡面的程式碼一樣，都不會外洩給客戶端的使用者看見內容。

```jsx
// <root>/pages/api/feedback.js

function handler(req, res) {
  res.status(200).json({ message: 'Our First API Route' });
}

export default handler;
```

實際上這邊就是在撰寫 Node.js 程式碼，Next.js 把 API Routes 設計得跟 Express.js 很像。

- `req`：Request Object
- `res`：Response Object

接著當你造訪 `http://localhost:3000/api/feedback` 時，你就可以看到我們的 JSON Response。

## 將 SPA 連接到資料庫的問題

在 Web 應用程式中，我們也會需要在資料庫中保存和提取資料，否則我們只能使用瀏覽器存取資料，但是將資料庫連接到 Web 應用程式會有一個嚴重的問題，那就是「安全」。

正所謂在前端的世界豪無隱私，你沒辦法隱藏任何 Client Side 的程式碼，不管你怎麼藏，只要開啟開發工具仔細翻找 Source，你儲存在 Client-Side Code 的機密資訊都是會被找到的。因此，像這種資料庫的登入憑證是不能放在前端的，通常我們會在後端像是 Node.js 來存放與編寫。

有些專案則是使用 Firebase 等服務提供的 SDK，但是這也不是直接與資料庫溝通，而是透過他們提供的 Web API 再去存取 Firebase 資料庫。

不過在 Next.js 的世界，我們可以透過 API Routes 完美地解決以上問題。

## 表單提交範例

這是一個提交表單的範例，透過 React 的 “useRef” 取得表單 Input 與 Email 欄位的值之後，禁止默認的提交行為，改用 JavaScript 自定義後續的表單送出方式。

這邊串接的 API Routes 不用寫 Domain，相對路徑會直接帶上我們目前的 Domain。

我們這裡預期會有兩種 HTTP Method，`POST` 提交表單並返回所有資料，與 `GET` 取得所有資料，所使用的 URL 是同一個，符合 CRUD。

```jsx
import { useRef, useState } from 'react';

function HomePage() {
  const [feedbackItems, setFeedbackItems] = useState([]);

  const emailInputRef = useRef();
  const feedbackInputRef = useRef();

  // 送出 JSON 資料提交表單，並返回最新 JSON 資料
  function submitFormHandler(event) {
    event.preventDefault();

    const enteredEmail = emailInputRef.current.value;
    const enteredFeedback = feedbackInputRef.current.value;

    const reqBody = { email: enteredEmail, text: enteredFeedback };

    fetch('/api/feedback', {
      method: 'POST',
      body: JSON.stringify(reqBody),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => console.log(data));
  }

  // 取得最新 JSON 資料
  function loadFeedbackHandler() {
    fetch('/api/feedback')
      .then((response) => response.json())
      .then((data) => {
        setFeedbackItems(data.feedback);
      });
  }

  return (
    <div>
      <h1>The Home Page</h1>
      <form onSubmit={submitFormHandler}>
        <div>
          <label htmlFor="email">Your Email Address</label>
          <input type="email" id="email" ref={emailInputRef} />
        </div>
        <div>
          <label htmlFor="feedback">Your Feedback</label>
          <textarea id="feedback" rows="5" ref={feedbackInputRef}></textarea>
        </div>
        <button>Send Feedback</button>
      </form>
      <hr />
      <button onClick={loadFeedbackHandler}>Load Feedback</button>
      <ul>
        {feedbackItems.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;
```

這是我們對應的 API Routes 的 Code，我們會判斷 `req.method` 如果是 `POST` 就將新的 Feedback 寫入檔案，然後將最新的所有資料返回給前端顯示。

```jsx
// <root>/pages/api/feedback.js

import fs from 'fs'; // import file system Node.js module
import path from 'path'; // import path Node.js module

export function buildFeedbackPath() {
  // process.cwd() returns the current working directory of the Node.js process
  return path.join(process.cwd(), 'data', 'feedback.json');
}

export function extractFeedback(filePath) {
  // readFileSync() reads the entire contents of a file synchronously
  const fileData = fs.readFileSync(filePath);
  // JSON.parse() parses a JSON string, constructing the JavaScript value or object described by the string
  const data = JSON.parse(fileData);
  return data;
}

function handler(req, res) {
  if (req.method === 'POST') {
    const { email } = req.body;
    const feedbackText = req.body.text;

    const newFeedback = {
      id: new Date().toISOString(),
      email,
      text: feedbackText,
    };

    // store that in a database or in a file
    const filePath = buildFeedbackPath();
    const data = extractFeedback(filePath);
    data.push(newFeedback);
    // writeFileSync() writes data to a file, replacing the file if it already exists
    // JSON.stringify() converts a JavaScript object or value to a JSON string
    fs.writeFileSync(filePath, JSON.stringify(data));
    res.status(201).json({ message: 'Success!', feedback: newFeedback });
  } else {
    const filePath = buildFeedbackPath();
    const data = extractFeedback(filePath);
    res.status(200).json({ feedback: data });
  }
}

export default handler;
```

當然這些 Node.js 的 Code 也能使用在同為 Server Side 的 Pre-Rendering Page 上面，舉例來說，在 “getStaticProps” 或 “getServerSideProps” 中取得 Feedback 資料。

在 Server Side 不能使用 `fetch` 取得資料，但是我們可以直接使用從 API Routes 使用 `buildFeedbackPath` 與 `extractFeedback` 來取得 Feedback 資料。

```jsx
export async function getStaticProps() {
  const filePath = buildFeedbackPath();
  const data = extractFeedback(filePath);
  return {
    props: {
      feedbackItems: data,
    },
  };
}
```

## 動態 ID 的 API Routes

在 Next.js 我們可以使用 `[slug]` 的方式創建資料夾或檔案，完成前端動態 ID 的路由配置。

同樣地，我們想要取得特定 Feedback ID 的資訊，希望 API 路徑是 `/api/feedback/[feedbackId]` ，這也是可以做到的。

我們是命名為 `[feedbackId].js` ，就可以透過 `req.query.feedbackId` 取得動態的 ID，再進一步篩選出該 ID 的資料並返回。

```jsx
// <root>/pages/api/feedback/[feedbackId].js

import { buildFeedbackPath, extractFeedback } from '.';

function handler(req, res) {
  const feedbackId = req.query.feedbackId;
  const filePath = buildFeedbackPath();
  const feedbackData = extractFeedback(filePath);
  const selectedFeedback = feedbackData.find(
    (feedback) => feedback.id === feedbackId,
  );
  res.status(200).json({ feedback: selectedFeedback });
}

export default handler;
```

至於在 Feedback 詳細頁等元件中的使用方式，大概就像是以下這樣 👇

```jsx
function loadFeedbackHandler(id) {
  fetch(`/api/feedback/${id}`)
    .then((response) => response.json())
    .then((data) => {
      setFeedbackData(data.feedback);
    });
}
```

> 💡 Catch-All Routes 也能在這裡使用，總之只要記得，不管是 Pages Router 或是 API Routes 都是愈具體的路由順位愈高（Concrete Routes > Dynamic Routes > Catch-All Routes）

最後，Next.js 的 API Routes 完全可以取代 Node.js Server，你可以使用 Node.js 建構一個完整的 MERN App。


透過 Next.js API Routes 新增後端程式碼，實現 Fullstack React


## 一、工作

到目前為止已經待在緯創 1.5 年了，對於 React 的使用算是已經熟練許多，除了一些特別少用的 Hook，基本以及稍微進階一點觀念都建立得差不多哩。

或許是還在熟悉環境吧，整個 2023 年除了公司專案剛好會用到的內容以外，我在額外自我學習網頁開發的時間少了許多，下半年應該有一半的原因是因為開始健身，不過另一半原因就是有點懶惰了，看來 2024 應該好好追一下這一兩年漏掉的進度了，否則真的是會不進則退。

今年開始有想法接觸一些後端與 DevOps，期許 2024 年的自己可以繼續朝向這個方向邁進。

### 推薦資源

- [React Developer Roadmap: Learn to become a React developer](https://roadmap.sh/react)

## 二、部落格

今年把 Gatsby 改用 Next 了，會這麼改是因為 Gatsby 團隊支援度給我的感覺不是很 OK，就還是轉往自由度更高，而且團隊維護率較高的 Next 吧。
部落格使用技術：

- Next.js (Pages Router)
- SSG
- Markdown
- Vercel
- Google Analytics

## 三、重訓

2023 上半年我都是在用 Nintendo Switch 的健身環大冒險來運動，老實說效果有限，不過絕對比完全沒動要強多了。下半年我因緣際會加入運動工房，還買了 48 堂教練課，希望學習一些健身的基礎知識吧，順便慢慢培養起運動的習慣，畢竟有教練的話絕對沒辦法偷懶不練的。

目前已經上了一半的課堂數，基本上重訓這件事已經成為生活的一部分了，之後如果沒上課，應該也能自己安排日常訓練的課表，總之重訓這件事沒意外應該是會一直持續下去的。

## 四、日文

雖然說上半年我拿起 GoGoGo 教科書學了一兩個月，但真的讓我回憶起那種學生時期啃課本的感覺，果斷就放棄了 😐

後來下半年我有發現一個叫做 Duolingo 的語言學習 App，就我對英文與中文的課程內容來看，我認為這個 App 應該只能教我基礎的語法跟單字句型吧！不過也可以啦，因為這種遊戲跟練等 RPG 的設計方式，讓我會想要玩到通關！

所以針對日文的後續規劃，就等我每天玩 Duolingo 玩到破關了再說吧（另外也私心許願 Duolingo 能持續更新日文課程到 N3 甚至 N2 的內容）。

## 五、旅遊

今年沒有出國，依舊是認真工作的一年！不過今年已經安排好了明年 2024 二月要去韓國首爾，這是我人生中第二次去韓國，依照之前對首爾的印象覺得就是大一點的台北吧 🤣 不過這次是冬天去的，滿期待雪景以及滑雪的行程！即將迎來我的人生首滑 ⛷️

## 六、動畫

我今年都沒紀錄自己看了哪些動畫，因為今年下半年忙碌起來之後幾乎很少看動畫，2024 一定要大補一波 2023 的作品。

## 七、影集

2023 我完全忘了 Netflix 的存在，單純幫家人朋友們包年的一年，跟動畫一樣明年一定記得看！

## 八、電影

> 2023 年看的所有電影，我都紀錄在[來去電影院 2023](https://www.seanhuang.dev/posts/2023-12-31-movie-list)這篇文章囉！

電影算是我 2022 到 2023 慢慢崛起的一項新興趣，基本上我每個月都會去威秀看一場以上，整年累積下來 2023 看了不少部電影，當然也因此花了不少錢 😅 這兩年都看到 iShow 會員自動升級到黃金影迷等級了 🍿

## 九、買車

沒錯！作為壓軸內容，我要紀錄自己今年終於買車了！雖然買的不是什麼名貴的車，我是買今年新的 2023 ALL NEW VIOS，但是作為我人生第一台購入的汽車，還是覺得非常感動，這是我送給自己 25 歲的生日禮物 🎁

當初主要就是選 80 萬級距的車款，包含 TOYOTA 常見的神 V 以及再上去一點的神 A，也有考慮外觀比較吸引我的仙草，與內裝質感吸引我的 Mazda 3，最後選 VIOS 是因為自己認為還會想換車啦，所以現階段先買一台代步為主的車款就好，而且如果真的換車，這台車就會給家人使用，考慮到家裡的車庫空間比較短，比較適合中小型的車。

不過其實會想要買車，主要是因為家裡給我上班代步用的老 March 突然故障了，只好忍痛換新啦 💸 不然我對 March 真的是有滿滿的回憶，它從小負責接送我們上下課、補習、出遊，真的很感謝它。

不過人生就是如此，必要的時候得有斷捨離，正所謂舊的不去新的不來，不管怎麼樣這台大白 VIOS 會延續小白 March 的意志，繼續陪伴我成長進步 💪

## 2024 期許

希望未來的一年…

- 充實網頁前端、後端開發，以及 DevOps 等技能
- 繼續重訓，邁向粗壯工程師之路
- 持續按照自己的腳步去學習日文，最重要的是 2024 要排一場日本之旅！


2023 年度回顧

來去電影院 2023


在 Next.js 中，`next/image` 提供了圖片載入優化的方式，有助於提升網站的性能和使用者體驗。

在尚未使用 Next Image 之前，網站上的圖片都是原始的尺寸與解析度，也不會去使用瀏覽器提供的優化格式（像是 Chrome 可使用的 WebP），這導致圖片檔案過大，這在正式生產環境中可不是一件好事。

使用 Next Image 會根據匯入的檔案自動設定 width 與 height。

```jsx
import profilePic from '@/public/images/site/avatar.jpeg';

<Image src={profilePic} alt="An image showing avatar" />;
```

我們也可以明確地撰寫 `width` 與 `height` 這兩個屬性，這麼做影響的不只是圖片呈現的寬度，也會影響到這張圖片被 Fetch 下來的尺寸大小，而畫面上的圖片寬高依然可以透過 CSS 去調整。

```jsx
import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={250}
      height={250}
      alt="Picture of the author"
    />
  );
}
```

如範例中所示，我們不需要載入原圖，因此明確指定圖片寬高，試圖減少載入的圖片大小。可以在 Network 裡面查看，可以發現圖片大小減少許多，並且使用 Chrome 的話會是 WebP 這個圖片優化的檔案格式。

除此之外，Next Image 預設有 Lazy Loading 的功能，也就是你還沒瀏覽到時，瀏覽器就不會去加載該張圖片。

你可以試著把畫面由手機版拉寬成桌機版，會發現 Network 中多 Request 了一張大圖，這就是因為當畫面變寬時，Next Image 才懶加載大圖，而畫面小的時候這一張圖就不會被載入。


使用 Next Image 最佳化圖片


近年來都會在專案中使用 EditorConfig + Prettier + ESLint 來統一程式碼撰寫風格與規則，主要是因為完成這些設定後，可以直接透過 VS Code 的 Format on Save，在儲存時一次執行排版與除錯，讓團隊成員之間的協作更為一致。

在開始之前，請先檢查專案內存在 `/.vscode/settings.json` 這個檔案，如果沒有的話可以自行新增一個，並且寫入底下的執行規則，其內容為指定執行 Prettier 後再執行 ESLint。

```json
{
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"]
}
```

完成設定後，確認你的 VS Code 已經安裝 [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)、[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)、[Format Code Action](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action) 這三個插件，如果你在其他專案用不到某些插件，你可以將它設定為僅在此工作區使用。


Sean's Blog

Hi, I'm Sean