타입스크립트(TypeScript)는 JavaScript의 정적 타입을 지원하는 개발 언어로, 개발자들이 코드를 더 안정적으로 관리할 수 있도록 도와줍니다. 그중에서도 undefined 타입은 종종 혼란스러운 상황을 초래할 수 있습니다. 이번 포스트에서는 타입스크립트에서 undefined 타입이 어떻게 동작하는지에 대해 알아보고, 더 나은 코드를 작성하는 방법을 살펴보겠습니다.

1. undefined와 null 타입

타입스크립트에서 undefined와 null은 모든 타입의 하위 타입으로 취급됩니다. 즉, 다른 모든 타입의 값에 undefined 또는 null을 할당할 수 있습니다.

let num: number;
num = 10; // 올바른 할당
num = undefined; // 올바른 할당
num = null; // 올바른 할당

2. --strictNullChecks 옵션

기본적으로 타입스크립트는 null 및 undefined에 대한 할당을 모든 타입에서 허용합니다. 하지만 --strictNullChecks 옵션을 사용하면 null 및 undefined를 허용하는 변수에 명시적으로 null 또는 undefined를 할당해야 합니다.

let num: number | undefined;
num = 10; // 올바른 할당
num = undefined; // 올바른 할당
num = null; // 에러: 'null'은 'number | undefined'에 할당될 수 없음

3. Non-Null 단언 연산자

! 연산자(non-null assertion operator)를 사용하여 null 또는 undefined를 갖지 않음을 확신할 수 있습니다. 하지만 너무 자주 사용하면 오히려 타입 안정성을 저해할 수 있으므로 주의가 필요합니다.

let name: string | undefined;
console.log(name!.toUpperCase()); // 'name'이 null 또는 undefined일 수 있음에도 불구하고 강제적으로 접근

4. 타입 가드(Type Guard)

타입 가드를 사용하여 null 또는 undefined를 확인하고 그에 따라 적절한 동작을 수행할 수 있습니다.

function isDefined(value: any): value is string {
  return value !== undefined && value !== null;
}

let name: string | undefined;
if (isDefined(name)) {
  console.log(name.toUpperCase());
} else {
  console.log('Name is undefined or null');
}

결론

타입스크립트에서 undefined 타입을 다루는 것은 변수 할당 및 안전성을 고려할 때 중요한 요소입니다. null 및 undefined에 대한 명시적 처리와 타입 가드를 적절히 활용하여 안전하고 읽기 쉬운 코드를 작성하는 것이 좋습니다.

참고 자료: 타입스크립트 공식 문서