在 typescript 中 react usestate 钩子类型-ag捕鱼王app官网

本文将演示在 中使用 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> 类型的 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>
              )
            }
    )
}