[TypeScript] 에러: Cannot invoke an object which is possibly 'undefined'.ts(2722)

 

 

아래처럼 타입을 선언한 후에 함수를 호출할 때 

Cannot invoke an object which is possibly 'undefined'.ts(2722)

라는 메시지를 받았다.

type OwnProps = {
  onPopupFocus?: () => void;
  onPopupDefocus?: () => void;
};

const togglePopupVisible = () => {
    if (isPopupVisible) onPopupDefocus();
    else onPopupFocus();
};

 

이것은 onPopupFocus와 onPopupDefocusf라는 함수의 타입을 선언할 때 onPopupFocus?와 같이 물음표를 함께 적어 필수로 선언되지 않아도 되는 값이라고 정의했기 때문이다. 정의되지 않은 값을 이후에 호출할 수도 있으니 타입스크립트 입장에서 경고를 준 케이스다. 따라서 해당 함수들이 정의되지 않은 undefined인 케이스를 고려해주면 된다.

옵셔널 체이닝(?.)을 이용해서 함수가 정의되지 않아 undefined 형태로 호출될 경우를 다뤘다. 옵셔널 체이닝을 사용한 후에 아래처럼 에러가 사라진 것을 확인할 수 있다.