在 TypeScript 中 React UseState 鉤子型別
-
React
useState鉤子定義 -
在 TypeScript 中使用帶有 React
useStateHook 的原始型別 - 在 TypeScript 中使用使用者定義的介面儲存狀態
-
在 TypeScript 的
useStateHook 中使用陣列
本文將演示在 TypeScript 中使用 React useState 鉤子。
React useState 鉤子定義
React useState 鉤子在使用功能元件時起著重要的作用，從儲存臨時資料到從 API 呼叫接收資料。隨著 TypeScript 的引入，開發人員的體驗得到了多方面的提升。
TypeScript 支援向 React useState 鉤子新增型別。這是有利的，因為 TypeScript 可以在設定值期間推斷型別，甚至檢測型別中的錯誤。
這可以更早地得到緩解，從而實現安全部署。
根據 TypeScript React 文件，TypeScript 對 React useState 有一個通用定義。
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
這裡，S 是一個泛型型別。它接受初始狀態，鉤子可以接受由 S 指示的狀態和 Dispatch<SetStateAction<S>> 型別的 setState 函式。
瞭解 setState 函式的推斷型別的一種簡單方法是將滑鼠懸停在任何適當的 IDE 或文字編輯器（如 VSCode）中的變數上。
在 TypeScript 中使用帶有 React useState Hook 的原始型別
useState 鉤子可以在應用程式狀態中設定原始型別。原始型別包括 number、string 和 boolean。
這是一個示例，說明如何將 useState 用於 TypeScript 中的原始型別。
const InfoComponent = () => {
const [name, setName] = React.useState<string>("");
const [age, setAge] = React.useState<number>(0);
const [isMarried, setIsMarried] = React.useState<boolean>(false);
React.useEffect(() => {
setName("Geralt");
setAge(95);
setIsMarried(false);
}, []);
return (
<>
<div>Witcher name : {name}</div>
<div>Age : {age}</div>
<div>Married : {isMarried ? 'Yes' : 'No'}</div>
</>
)
}
因此，useState 鉤子已用於儲存原始型別，這些原始型別設定在 useEffect 鉤子中，該鉤子在元件安裝時觸發一次。
在 TypeScript 中使用使用者定義的介面儲存狀態
甚至使用者定義的介面也可以用作 useState 鉤子的型別。可以修改上一節中使用的程式碼段以將資訊儲存在介面中，從而使程式碼變得更有條理。
interface IUser {
name : string ;
age : number ;
isMarried : boolean ;
}
const InfoComponent = () => {
const [ state, setState ] = React.useState<IUser>({
name : "",
age : 0,
isMarried : false
});
React.useEffect(() => {
setState({
name : "Geralt",
age : 95,
isMarried : false
});
}, []);
return (
<>
<div>Witcher name : {state.name}</div>
<div>Age : {state.age}</div>
<div>Married : {state.isMarried ? 'Yes' : 'No'}</div>
</>
)
}
為了在 setState 函式中設定可選欄位，as 關鍵字可用於型別斷言。我們必須使用傳遞給 setState 函式的可選狀態屬性來覆蓋初始狀態。
setState({
...state, ...{
name : "Geralt",
isMarried : "false"
} as unknown as IUser
});
因此在上面的例子中，age 欄位沒有被設定，並且使用了預設值，它是由 state 提供的。狀態覆蓋由 ... 或擴充套件運算子完成。
在 TypeScript 的 useState Hook 中使用陣列
在從 API 獲取資料時，陣列通常可以在 useState 掛鉤中使用。以下程式碼段演示了這一點，同時使用 useState 鉤子獲取資料並顯示它。
interface IPost {
userId : number ;
id : number ;
title : string ;
body : string ;
}
export default App = () => {
const [ state, setState ] = React.useState<IPost[]>([]);
const getPosts = async () => {
const res : Response = await fetch("https://jsonplaceholder.typicode.com/posts");
const posts : IPost[] = await res.json();
setState(posts);
}
React.useEffect(() => {
getPosts();
}, []);
return (
<>
{
state.map( (post,index) => <div key={index}>
<h2>{post.title}</h2>
<div>{post.id}</div>
<p>{post.body}</p>
</div>
)
}
</>
)
}
