React TS - useState Type

定義 useState 值的型別

在 React 中，使用 useState 来管理狀態。可以透過定義狀態型別，明確指定它所能包含的值的型別

// 僅為數字
const [draftCount, setDraftCount] = useState<number>(0);

// 可以是數字或字串
const [draftCount, setDraftCount] = useState<string | number>(0);

setState 作為 props 的型別定義

如果希望將 setState 作為元件的 props 進行傳遞，可以使用 Dispatch和SetStateAction

import type { Dispatch, SetStateAction } from "react";

type QuoteFilterProps = {
  filters: QuoteFilters;
  setFilters: Dispatch<SetStateAction<QuoteFilters>>;
};

倘若將 setStateAction 包進函式內，則可以像下面方式定義：

const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
  setFilters((filters) => ({
    ...filters,
    [e.target.name]: e.target.value,
  }));
};

也可以這樣定義

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  setFilters((filters) => ({
    ...filters,
    [e.target.name]: e.target.value,
  }));
};

ChangeEventHandler 定義事件處理程序的型別; ChangeEvent 則是定義 event 物件的型別

參考資料

• React && TypeScript