객체 - optional vs undefined 프로퍼티

이전에 배운 optional 프로퍼티는 타입을 선언한 객체의 프로퍼티가 있어도 되고, 없어도 되는 경우를 의미했다.

interface Player {
  name: string;
  age: number;
  position?: string;
}

const son: Player = {
  name: '손흥민',
  age: 33,
  position: '윙어', // type: string | undefined
};

const hwang: Player = {
  name: '황희찬',
  age: 30,
  // position 프로퍼티는 없어도 된다
};

여기서 position 프로퍼티의 타입은 string | undefined가 되는 것을 볼 수 있다.
그러면 처음부터 position 프로퍼티를 optional이 아니라 string | undefined로 선언한 것이랑 어떤 차이가 있을까?

interface Cat {
  name: string;
  age: number;
  breed: string | undefined;
}
const cat: Cat = {
  name: '냥이',
  age: 6,
}; // error

undefined 값을 가질 수 있을지라도 프로퍼티는 입력을 해줘야 에러가 발생하지 않는다. 그래서 프로퍼티를 입력하지 않을 것이라면 무조건 optional로 처리를 해주는 것이 중요하다.