How to create type for reference object in TypeScript React app with useRef?

user_10106073 0
Viewed 89

I create reference for object in TypeScript React app:

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

And I need to type my reference object. I searched a lot of info, but everything is related to component reference type. I tried different ways, but every time get errors:

RefObject with generic:

// TS2339: Property 'low' does not exist on type 'Range | null'.

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

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

Ref type with generic:

// TS2339: Property 'low' does not exist on type 'Range | null'.

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

Just interface:

// TS2339: Property 'current' does not exist on type 'Range'.

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

Please can somebody help me how to write the correct type for the object reference.

react-native react-hooks typescript reactjs reference
1 Answers

You type the useRef hook.

Example:

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

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