useState의 타입지원

개발을 진행중이던 프로젝트에 framer-motion을 이용하여 애니메이션 효과를 주기 위해 문서들을 뒤적거리고 있었던 찰나였다.

 

클릭 이벤트를 이용한 motion

 

마음에 드는 효과가 있어서 한번 코드를 그대로 베껴보던 도중 문제를 맞닥뜨렸다. 

문제가 되는 코드는 다음과 같았다.

 

const [selectId, setSelectId] = useState<number>();

const overlayClicked = () => {
        setSelectId(null);
};

'null' 형식의 인수는 'SetStateAction<number | undefined>' 형식의 매개 변수에 할당될 수 없습니다.ts(2345)

다음과 같이 null로 초기화 하고자 하였으나 오류가 발생하는 모습이었다. 

useState는 타입추론을 잘 지원하지만 undefined 또는 null로 초기화하려는 경우 명시적으로 제네릭 파라미터를 입력하여야 한다고 한다. 그렇지 않으면 Typescript는 제대로 동작하기 위한 충분한 정보를 알 수 없다.

document의 코드는 JavaScript 문법이라서 Typescript를 사용하는 나는 그대로 코드를 가져 올 수 없었다.

const [selectId, setSelectId] = useState<number | null>();

const overlayClicked = () => {
        setSelectId(null);
};

다음과 같이 제네릭으로 null을 명시해주었더니 오류가 깔끔하게 사라졌다.