在 TypeScript 中 React UseState 鉤子型別

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. React useState 鉤子定義
  2. 在 TypeScript 中使用帶有 React useState Hook 的原始型別
  3. 在 TypeScript 中使用使用者定義的介面儲存狀態
  4. 在 TypeScript 的 useState Hook 中使用陣列
在 TypeScript 中 React UseState 鉤子型別

本文將演示在 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 鉤子可以在應用程式狀態中設定原始型別。原始型別包括 numberstringboolean

這是一個示例,說明如何將 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>
              )
            }
        </>
    )
}
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

相關文章 - TypeScript React