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