怎么优雅的在React 项目中使用 TypeScript（1）

1.useEffect()
useEffect是一个处理副作用的hook

useEffect(() => {
return () => {
// 可以返回函数 可以在组件卸载时 或者是 组件执行完上一次更新时 执行清除定时器的任务
}
}, []) // 三种情况

第二个参数的选择有三种情况
* 第一种情况 不传第二个参数 组件更新每次都执行回调
* 第二个情况  传入一个空数组 只会在渲染时执行一次回调
* 第三种情况，数组中有依赖项  只要依赖项发生变化 回调就会执行

TS与JS的用法几乎一样，不需要做处理

2.useState
首先这是一个泛型函数，接受一个类型变量来指定状态的类型

const [count, setCount] = useState(0)
const [count, setCount] = useState<number>(0) // 此时不需要指明类型 因为有类型推导

但是如果定义的是数组或者对象, 此时这种情况必须指定类型

const [list, setList] = useState<Array<{ id: number, name: string }>>([])

3.useRef

在TS中必须要指明类型

useRef<HTMLInputElement>(null)

console.log(input.current.value) // value是HTMLInputElement的属性

useRef初始值是空的，所以需要非空判断的

// 可选链操作符
console.log(input.current?.value) //此时表示 如果current为null 或者undeifned 不再执行

// 非空断言  一定要保证非空断言的变量不为空
console.log(input.current!.value)  // 主观上的判断 只会屏蔽ts的提示错误 而不会影响js执行的错误

// 流程控制
if (input.current) {
    // 此时不需要进行类型非空断言 因为if帮助屏蔽了ts的空的类型
    console.log(input.current.value)
}