TS与hook useState

TS文件里hook的useState怎么设置格式

const [name, setName] = useState<String>("tom"); // 字符串
const [age, setAge] = useState<Number>(18); // 数字
const [sex, setSex] = useState<Boolean>(true); // 布尔值

对象

const [student, setStudent] = useState<{name: string; age: number; sex: boolean}>({ // 默认值
  name: "tom",
  age: 18,
  sex: true
});
setStudent({ // 赋值
  name: "anne",
  age: 16,
  sex: false
});

数组：

const [students, setStudents] = useState<Array<{name: string; age: number; sex: boolean}>>([ // 默认值
  {
    name: "tom",
    age: 18,
    sex: true
  }
])
setStudents([ // 赋值
  {
    name: "anne",
    age: 16,
    sex: false
  }
])

组件(元素)：组件本质上抛出的就是个jsx的元素

const [clockDom, setClockDom] = React.useState<JSX.Element>(<div/>);
if (clockShow) {
  setClockDom(<Clock/>);
} else {
  setClockDom(<div/>);
}

贴个完整代码例子：

还有其他解决办法（但不建议使用因为滥用any，仅供参考）：
解决方法2：const [students, setStudents] = useState<any>()
解决方法3：const [students, setStudents] = useState([] as any[])

随便提一下所有初始化数据都要在useEffect里进行，useEffect干嘛用的这里就不展开了百度很多文章，以后有空我也来说说useEffect

TS与hook useState

推荐阅读