迹忆客 专注技术分享

本文将演示在 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>
              )
            }
        </>
    )
}