011react+TS

useState-自动推导

通常React会根据传入useState的默认值来自动推导类型,不需要显式标注类型

// react + ts

// 根据初始值自动推断
// 场景：明确的初始值

import { useState } from 'react'

function App() {
  const [value, toggle] = useState(false)

  const [list, setList] = useState([1, 2, 3])

  const changeValue = () => {
    toggle(true)
  }

  const changeList = () => {
    setList([4])
  }

  return <>this is app {list}</>
}

export default App

说明：

1. value: 类型为boolean

2. toggle: 参数类型为boolean

   
   image.png

useState-传递泛型参数

useState本身是一个泛型函数，可以传入具体的自定义类型

// react + ts

import { useState } from 'react'

type User = {
  name: string
  age: number
}

function App() {


  const [user, setUser] = useState<User>({
    name: 'jack',
    age: 18,
  })

  const changeUser = () => {
    setUser(() => ({
      name: 'john',
      age: 28,
    }))
  }

  return <>this is app {user.name}</>
}

export default App

说明：

1. 限制useState函数参数的初始值必须满足类型为： User | （）=> User
2. 限制setUser函数的参数必须满足类型为：User | （）=> User | undefined
3. user状态数据具备User类型相关的类型提示

useState-初始值为null

当我们不知道状态的初始值是什么，将useState的初始值为null是一个常见的做法，可以通过具体类型联合null来做显式注解

// react + ts

import { useState } from 'react'

type User = {
  name: string
  age: number
}

function App() {
  const [user, setUser] = useState<User | null>(null)

  const changeUser = () => {
    setUser(null)
    setUser({
      name: 'jack',
      age: 18,
    })
  }
  // 为了类型安全  可选链做类型守卫
  // 只有user不为null（不为空值）的时候才进行点运算
  return <>this is app {user?.age}</>
}

export default App

说明：

1. 限制useState函数参数的初始值可以是 User | null
2. 限制setUser函数的参数类型可以是 User | null

事件与TypeScript - 为事件回调添加类型

为事件回调添加类型约束需要使用React内置的泛型函数来做，比如最常见的鼠标点击事件和表单输入事件：

说明：通过泛型函数约束了整个事件回调函数的类型，主要是为了约束事件参数e的类型

props与TypeScript - 基础使用

为组件prop添加类型，本质是给函数的参数做类型注解，可以使用type对象类型或者interface接口来做注解

// props + ts

// type Props = {
//   className: string
// }

interface Props {
  className: string
  title?: string
}

function Button(props: Props) {
  const { className } = props
  return <button className={className}>click me </button>
}

function App() {
  return (
    <>
      <Button className="test" title="this is title" />
    </>
  )
}

export default App

说明：Button组件只能传入名称为className的prop参数，类型为string, 且为必填

props与TypeScript - 为children添加类型

children是一个比较特殊的prop, 支持多种不同类型数据的传入，需要通过一个内置的ReactNode类型来做注解

说明：注解之后，children可以是多种类型，包括：React.ReactElement 、string、number、
React.ReactFragment 、React.ReactPortal 、boolean、 null 、undefined

props与TypeScript - 为事件prop添加类型

组件经常执行类型为函数的prop实现子传父，这类prop重点在于函数参数类型的注解

说明：

1. 在组件内部调用时需要遵守类型的约束，参数传递需要满足要求
2. 绑定prop时如果绑定内联函数直接可以推断出参数类型，否则需要单独注解匹配的参数类型

useRef与TypeScript - 获取dom

获取dom的场景，可以直接把要获取的dom元素的类型当成泛型参数传递给useRef,可以推导出.current属性的类型

useRef与TypeScript - 引用稳定的存储器

把useRef当成引用稳定的存储器使用的场景可以通过泛型传入联合类型来做，比如定时器的场景：