在react中使用typescript学习笔记

在react中使用typescript

常用props ts类型

基础属性类型
type AppProps = {
   
  message: string
  count: number
  disabled: boolean
  /** array of a type! */
  names: string[]
  /** string literals to specify exact string values, with a union type to join them together */
  status: 'waiting' | 'success'
  /** 任意需要使用其属性的对象（不推荐使用，但是作为占位很有用） */
  obj: object
  /** 作用和`object`几乎一样，和 `Object`完全一样 */
  obj2: {
   }
  /** 列出对象全部数量的属性 （推荐使用） */
  obj3: {
   
    id: string
    title: string
  }
  /** array of objects! (common) */
  objArr: {
   
    id: string
    title: string
  }[]
  /** 任意数量属性的字典，具有相同类型*/
  dict1: {
   
    [key: string]: MyTypeHere
  }
  /** 作用和dict1完全相同 */
  dict2: Record<string, MyTypeHere>
  /** 任意完全不会调用的函数 */
  onSomething: Function
  /** 没有参数&返回值的函数 */
  onClick: () => void
  /** 携带参数的函数 */
  onChange: (id: number) => void
  /** 携带点击事件的函数 */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void
  /** 可选的属性 */
  optional?: OptionalType
}

  
常用React属性类型
export declare interface AppBetterProps {
   
  children: React.ReactNode // 一般情况下推荐使用，支持所有类型 Great
  functionChildren: (name: string) => React.ReactNode
  style?: React.CSSProperties // 传递style对象
  onChange?: React.FormEventHandler<HTMLInputElement>
}

export declare interface AppProps {
   
  children1: JSX.Element // 差, 不支持数组
  children2: JSX.Element | JSX.Element[] // 一般, 不支持字符串
  children3: React.ReactChildren // 忽略命名，不是一个合适的类型，工具类类型
  children4: React.ReactChild[] // 很好
  children: React.ReactNode // 最佳，支持所有类型 推荐使用
  functionChildren: (name: string) => React.ReactNode // recommended function as a child render prop type
  style?: React.CSSProperties // 传递style对象
  onChange?: React.FormEventHandler<HTMLInputElement> // 表单事件, 泛型参数是event.target的类型
}

更多用法

//使用用React.FC声明函数组件和普通声明以及 PropsWithChildren 的区别是：
//React.FC显式地定义了返回类型，其他方式是隐式推导的
//React.FC对静态属性：displayName、propTypes、defaultProps提供了类型检查和自动补全
//React.FC为children提供了隐式的类型（ReactElement | null）
const App: react.FC<{
   }> = () => [1, 2, 3] as any

//使用 PropsWithChildren，这种方式可以为你省去频繁定义 children 的类型，自动设置 children 类型为 ReactNode
const App = ({
   message, children}: React.PropsWithChildren<{
   message: string}>)

//useRef<T> 当初始值为 null 时，有两种创建方式
//第一种方式的 ref1.current 是只读的（read-only），并且可以传递给内置的 ref 属性，绑定 DOM 元素 
const ref1 = React.useRef<HTMLInputElement>(null)
//第二种方式的 ref2.current 是可变的
const ref2 = React.useRef<HTMLInputElement | null>(null)

const handleChange = React.useCallback<
  React.ChangeEventHandler<HTMLInputElement>
>(evt => {
   
  console.log(evt.target.value)
}, [])

//如果有大量的自定义 Hook 需要处理，这里有一个方便的工具方法可以处理 tuple 返回值
function tuplify<T extends any[]>(...elements: T) {
   
  return elements
}
function useLoading() {