TypeScript undefined

Typescript로 개발할 때, undefined나 null이 예상되는 값일 경우 접근하거나 대입할 때 컴파일 에러를 마주칠 수 있습니다.

1. ~ is possibly 'undefined'.
2. Type 'undefined' is not assigniable to type ~ .
   와 같은 error를 종종 마주할 수 있다.

이러한 error를 해결할 수 있는 5가지의 방법을 제시하려고 한다~!

1. if문

const handleValue = (value?: number) => {
  if (value) {
    setValue(value);
  }
};

간단하게 if문을 사용하여 value 값이 falsy하지 않을 때로 제한할 수 있습니다.

typeof를 사용하여 타입 체킹을 해줄 수도 있습니다.

const handleValue = (value?: number) => {
  if (typeof value === 'number') {
    setValue(value);
  }
};

2. as

const handleValue = (value?: number) => {
  setValue(value as number);
};

as를 사용하여 강제로 타입을 지정해줄 수도 있습니다.
하지만 컴파일 에러만 해결할 뿐, 실제로 number 외의 값이 들어왔을 때는 런타임 에러가 발생할 수 있습니다.

3. non-null assertion 연산자 !

const handleValue = (value?: number) => {
  setValue(value!);
};

이 또한 value가 undefined 또는 null이 될 수 없음을 강제로 지정해주는 방법이다.

역시나 컴파일 에러만 해결할 뿐, 실제로 number 외의 값이 들어왔을 때는 런타임 에러가 발생할 수 있습니다.

4. null 병합 연산자 ??

const handleValue = (value?: number) => {
  setValue(value ?? 0);
};

null 병합 연산자는 undefined와 null만 체크하여 대체 값을 전달합니다.

value가 undefined 또는 null일 경우 0으로 대입됩니다.

5. 논리 연산자 OR

const handleValue = (value?: number) => {
  setValue(value || 0);
};

반면 논리 연산자의 경우 undefined와 null을 포함한 falsy value 모두를 체크합니다.
따라서 위의 경우 value에 NaN이 들어오더라도 핸들링을 해줄 수 있습니다.

참고 사이트