react useRef typescript类型声明

3,325 阅读1分钟

概念

接口类型

 interface MutableRefObject<T> {
   current: T;
 }
 
 interface RefObject<T> {
   readonly current: T|null;
 }

useRef定义(函数重载)

 function useRef<T>(initialValue: T): MutableRefObject<T>;
 function useRef<T>(initialValue: T|null): RefObject<T>;

类型说明

MutableRefObject类型或RefObject类型

MutableRefObject类型

类型断言

const intervalRef = useRef(1); // 1可以为任何数据类型

image.png

指定类型

填入类型与指定类型一致
const intervalRef = useRef<number>(1);

image.png

特别说明

const intervalRef = useRef(null);

image.png

const intervalRef = useRef<null>(null);

image.png

RefObject类型

指定类型不为null且初始值为null

const intervalRef = useRef<number>(null);

image.png

应用

关于domRef(immutable)

interface IntervalRef {
  tick: number;
}

// 父组件
const Parent= () => {
  const modelRef = useRef<IntervalRef>(null);
  useEffect(()=>{
     // 访问 
     console.log(modelRef.current?.tick);
  })
  return (
    <Child modelRef={modelRef}/>
  )
}
// 子组件
import { FC, RefObject } from 'react';
const Child: FC<{ modelRef: RefObject<IntervalRef>}>= () => {
  return (
    <Child modelRef={modelRef}/>
  )
}

注:直接引入RefObject类型;因为初始化时候为null

其它(mutable)

注:其它应用可参考