error TS2322: Type 'Timeout' is not assignable to type 'number' 해결 방법

 

React + Typescript 환경에서 

error TS2322: Type 'Timeout' is not assignable to type 'number' 

해결 방법

 

setTimeout을 쓸때  useRef에 setTimeout의 return 값을 저장해야 됩니다. 

 

const timeoutId = useRef<number | undefined>()

timeoutId.current = setTimeout(() => {
setVisible(false)
}, timeoutMilliSeconds)

 

 

이런식으로 useRef의 제네릭 타입을 지정하게 되면 위와 같은 에러가 발생합니다.

 

const timeoutId = useRef<ReturnType<typeof setTimeout> | undefined>()

 

이렇게 useRef의 제너릭 타입을 setTimeout의 ReturnType으로 지정해주면 해결 됩니다.