在 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>
)
}
</>
)
}
