1. useState本身是一个泛型函数,可以传入具体的自定义类型
2. 当我们不知道状态的初始值是什么,将useState的初始值为null是一个常见的做法,可以通过具体类型联合null来做显示注解
具体代码如下:
import { useState } from 'react';
type User = {
name: string,
age: number
}
function App() {
const [user, setUser] = useState<User | null>(null);
// const [user, setUser] = useState<User>(() => {
// return {
// name: 'jack',
// age: 18
// }
// });
return (
<div>
apo:
{/* 为了类型安全,可选链做类型守卫 */}
{user?.age}
{user?.name}
</div>
)
}
export default App