TS 学习笔记 04在react项目中使用TS，具体学习如何使用： hooks：useState,useEffect,u

在react项目中使用TS，具体学习如何使用：

hooks：useState,useEffect,useRef等hooks的使用
redux：useDispatch, reducer, useSelector等的使用

useEffect的使用

目标

掌握useEffect hook在typescript中的使用

useEffect的格式

useEffect用来管理副作用（例如 API 调用，事件添加....）

示例用法

useEffect(() => {
  setInterval(()=>{
    
  },1000)
}, [])

在typescript中使用和javascript中使用完全一致

学习`useEffect`的定义格式

/**
 * Accepts a function that contains imperative, possibly effectful code.
 *
 * @param effect Imperative function that can return a cleanup function
 * @param deps If present, effect will only activate if the values in the list change.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#useeffect
 */
function useEffect(effect: EffectCallback, deps?: DependencyList): void;

useEffect函数不涉及到任何泛型参数，在typescript中使用和javascript中使用完全一致。
? 表示可选
DependencyList是一个readonly any[]

小结

useEffect的使用在ts和js中是一致的；
通过查看ts的类型声明文件（一定程度上可代替文档），就可以知道它的用法
类型声明文件（一定程度上可代替文档），就可以知道它的用法

useState的使用

目标

掌握useState 在typescript中的使用

useState的格式

导入useState

通过ctrl+点击，查看格式

useState的类型声明如下

/**
 * Returns a stateful value, and a function to update it.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usestate
 */
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

标准用法-接收泛型参数

useState接收一个泛型参数，用于指定初始值的类型

// 使用泛型
const [name, setName] = useState<string>('张三')
const [age, setAge] = useState<number>(28)
const [isProgrammer, setIsProgrammer] = useState<boolean>(true)

// 如果你在set函数中的参数不符合声明的变量类型，程序会报错
<button onClick={() => setName(100)}>按钮</button>  // 报错

简便用法-使用类型推论省略泛型参数

在使用useState的时候，只要提供了初始值，typescript会自动根据初始值进行类型推断，因此useState的泛型参数可以省略

const [name, setName] = useState('张三')
const [age, setAge] = useState(28)
const [isProgrammer, setIsProgrammer] = useState(true)

小结

useState本身是需要接收泛型参数的，由于有类型推断机制，这个泛型可以省略
useState的使用与js基本一致

TS 学习笔记 04