在 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