Typescript에서 undefined 값 다루기

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

~ is possibly 'undefined'.

또는

Type 'undefined' is not assigniable to type ~ .

와 같은 메세지를 종종 마주할 수 있는데요,

5가지의 방법으로 이 상황을 다룰 수 있습니다.

 

const setValue = (value: number) => value;

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

와 같은 코드가 있다고 해봅시다.

number 타입의 인자만을 받아야 하는 함수에 number|undefined 타입을 넣으려고 하니 당연히 컴파일 에러가 발생합니다.

 

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 외의 값이 들어왔을 때는 런타임 에러가 발생할 수 있습니다.

 

3. null 병합 연산자 ??

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

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

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

 

3. 논리 연산자 OR

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

반면 논리 연산자의 경우 undefined와 null을 포함한 falsy value 모두를 체크합니다.

따라서 위의 경우 value에 NaN이 들어오더라도 핸들링을 해줄 수 있습니다.