TypeScript React中如何为useRef创建的对象引用定义正确类型

正确写法 #

直接将自定义类型作为泛型参数传入useRef调用，不需要额外手动标注变量类型，TS会自动推导ref的正确类型：

import { useRef } from 'react'

interface Range {
  low: number
  high: number
  min: number
  max: number
}

const inPropsRef = useRef<Range>({low: 10, high: 80, min: 0, max: 100})

// 访问、修改属性均不会触发类型错误
console.log(inPropsRef.current.low) // 类型推导为number
inPropsRef.current.high = 85

如果有特殊场景需要手动标注ref变量的类型，需要使用MutableRefObject类型，这是React为存储可变普通值的ref设计的类型：

import { useRef } from 'react'
import type { MutableRefObject } from 'react'

interface Range {
  low: number
  high: number
  min: number
  max: number
}

const inPropsRef: MutableRefObject<Range> = useRef<Range>({low: 10, high: 80, min: 0, max: 100})

之前写法的错误原因 #

• 标注为RefObject<Range>/Ref<Range>：这两个类型是为DOM节点、类组件引用设计的，类型定义中current为只读属性，且类型为Range | null，直接访问current.low时TS会判定你可能在null值上读取属性，因此抛出low属性不存在的错误。
• 标注为Range：useRef的返回值永远是带current字段的引用包装对象，不是存入的原始值本身，Range类型上不存在current字段，必然触发类型错误。

注意：不要混淆两种useRef的使用场景：存DOM/组件实例时初始值传null，泛型对应实例类型，返回的ref.current是T | null；存普通可变值时传入匹配的初始值，泛型对应值的类型，返回的ref.current是可读写的T类型。

内容的提问来源于stack exchange，提问作者jc28