타입스크립트의 optional property 와 사소한 주의점

Optional Property

타입스크립트로 객체를 정의했을 때, 선택적으로 프로퍼티를 받을 수 있는 기능이다.

적용 전

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Jake",
};

위와 같이 interface 를 작성하면, Person 타입에 대해 age 가 필수적으로 입력되어야 한다. 입력하지 않는다면, age 를 입력하지 않았다고 에러가 발생한다.

적용 후

interface Person {
  name: string;
  age?: number; // age?: number 로 변경
}

const person: Person = {
  name: "Jake",
};

위와 같이 작성하면, age 는 더이상 필수적인 값이 아니다. 다만, 몇가지 주의해야할 점이 있다.

주의점

interface Person {
  name: string;
  age?: number; // age?: number 로 변경
}

위와 같이 ? 를 이용해 선택적인 프로퍼티를 만들면, 타입스크립트는 age 의 타입을 묵시적으로 number | undefined 로 받아들인다. 존재하지 않을 수 있음을 받아들이는 것이다.

이렇게 undefined 가 될 수 있다면, 해당 프로퍼티를 참조할 때도 이제는 신경써줘야 할 것이 생긴다.

function isAdult(person: Person) {
  if (person.age < 20) {
    return false;
  }

  return true;
}

일반 자바스크립트에서는 전혀 문제가 없어 보이는 간단한 함수를 만들어도 에러가 생긴다.

이 에러는 말하자면, 좋은 에러이다. 런타임 과정에 생길 수 있는 에러를 컴파일 타임에 알려주니 말이다. age 는 Optional Property 이기 때문에, 있을 수도 없을 수도 있어서 참조하기 전에는 늘 있는지 확인 먼저 해주는 것이 좋다.

자바를 경험해봤다면, 자바에서 if(Object != null) { ... } 과 같은 코드를 작성하여 NullPointerException 을 예방한 기억이 있을 수도 있다.

function isAdult(person: Person) {
  if (person.age && person.age < 20) {
    return false;
  }

  return true;
}

이렇게 먼저 person.age 가 있음을 확인 후에 비교를 진행하면 문제가 없다.