写在前面
要想在react + typescript 项目中正确的使用 hooks ，请务必掌握泛型的使用，关于泛型的讲解，我在上一篇博文中详细的进行了介绍，如果你还不了解 typescript 中的泛型请看上一篇：正确认识typescript中的泛型。
如何结合typescript正确使用hooks
在react中使用函数式组件，难免会使用到hooks，hooks赋予了函数式组件可以像 class 组件那样拥有状态的能力，那么如何结合typescript正确的使用hooks呢？
在react + typescript项目中正确使用useState
如果想编写一个 Header 组件，使其具备一个登录和退出的功能，登录的时候，显示一些提示已经登录的文字，退出的时候显示欢迎的文字，那么我们很容易知道：如果使用函数式组件来编写此 Header 组件，那么就一定会用到 useState ，因为登录与否的状态是该组件自身的状态，所以就会用到hooks中的 useState 来赋予函数式组件状态。如下：
// Header.tsx
import React, {
useState } from 'react'
export default function Header() {
const [isLogin, setIsLogin] = useState(false);
const _logout = () => {
setIsLogin(false)
}
const _login = () => {
setIsLogin(true)
}
return (
<div>
{
isLogin ? <p>You have logined in!</p> : <p>welcome, guest!</p>}
{
isLogin ? <button onClick={
_logout}>退出</button> : <button onClick={
_login}>登录</button>}
</div>
)
}
其实在第五行const [isLogin, setIsLogin] = useState(false);使用useState赋予初始值false的时候，后续在调用setIsLogin函数时，ts 编译器就会自动推断你传入的参数是不是boolean类型的，若不是，则会报错。第五行，我们也可以进行显式的进行限制，传入泛型，就像这样const [isLogin, setIsLogin] = useState<boolean>(false);
我们也可以把要显示的文案也抽象成为组件的一个状态，这样我们就不需要再写三元表达式了：
import React, {
useState } from 'react'
export default function Header() {
const [isLogin, setIsLogin] = useState<boolean>(false);
const [text, setText] = useState<string>('');
const _logout = () => {
setIsLogin(false);
setText('welcome, guest!');
}
const _login = () => {
setIsLogin(true);
setText('You have logined in!');
}
return (
<div>
<p>{
text }</p>
{
isLogin ? <button onClick={
_logout}>退出</button> : <button onClick={
_login}>登录</button>}
</div>
)
}
这里的函数setIsLogin只能传入布尔类型的值，函数setText只能传入 string 类型的值，传别的类型都会报错。
这里的两个状态比较简单，一个是布尔类型，一个是 string 类型，可能体现不出typescript的强大之处，那么我们再增加一个状态用户信息：const [user, setUser] = useState<UserType | null>(null)，完整代码如下：
import React, {
useState } from 'react'
type UserType = {
name: string;
age: number;
addr: string;
}
export default function Header() {
const [isLogin, setIsLogin] = useState<boolean>(false);
const [text, setText] = useState<string>('');
const [user, setUser] = useState<UserType | null>(null)
const _logout = () => {
setIsLogin(false);
setText('welcome, guest!');
setUser(null)
}
const _login = () => {
setIsLogin(true);
setText('You have logined in!');
setUser({
name: '小明',
age: 18,
addr: '深圳市南山区深圳湾河里'
})
}
return (
<div>
<p>{
text }</p>
<p>username is {
user?.name}, user's age is {user?.age}, user's address is {
user?.addr}</p>
{
isLogin ? <button onClick={
_logout}>退出</button> : <button onClick={
_login}>登录</button>}
</div>
)
}
我们给useState显式的传入泛型UserType或者null，就表示我们在后续调用setUser的时候，就只能传入UserType 类型的值或者 null 类型的值，否则ts编译器就会告诉你传值错误。这样做，我们在开发过程中可以省去了很多麻烦，可维护性也更好。
代码地址及文件路径
注：
本文代码github仓库地址：ts中正确使用useState
文件路径：src/components/Header.tsx。