[Typescript] 객체 타입의 호환성, 초과 프로퍼티 검사

🙋🏻‍♂️ 객체 타입에서의 호환성

type Animal = {
  name: string;
  color: string;
};

type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: "기린",
  color: "yellow",
};

let dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진도",
};

animal = dog; // ✅ OK
dog = animal; // ❌ NO

위 코드에서 알 수 있듯, animal이 dog보다 슈퍼타입이다.

✅ 추가 속성이 없는(조건이 적은) 객체가 슈퍼타입이 된다!!!!

타입스크립트는 프로퍼티를 기준으로 타입을 정의하는 구조적 타입 시스템을 따르기 때문에 Animal 타입은 name과 color 프로퍼티를 갖는 모든 객체들을 포함하는 집합으로 볼 수 있고 Dog 타입은 name과 color 거기에다 추가로 breed 프로퍼티를 갖는 모든 객체를 포함하는 집합으로 볼 수 있다.
따라서 dog 타입에 포함된다면 무조건 Animal 타입에도 포함되고, Animal 타입에 포함되더라도 무조건 Dog 타입에 포함되지는 않기 때문에 Animal은 Dog 타입의 슈퍼타입이다.

🙋🏻‍♂️ 초과 프로퍼티 검사

: 변수를 객체 리터럴로 초기화 할 때 발동하는 타입스크립트의 특수한 기능으로, 타입에 정의된 프로퍼티 외의 다른 초과된 프로퍼티를 갖는 객체를 변수에 할당할 수 없도록 막아주는 기능

아래 코드처럼 Book 타입 변수에 ProgrammingBook 타입의 초기값을 설정하면, 오류가 발생한다. (초과 프로퍼티 검사 기능이 있기 때문)

type Book = {
  name: string;
  price: number;
};

type ProgrammingBook = {
  name: string;
  price: number;
  skill: string;
};

(...)

let book2: Book = { // ❌ 오류 발생
  name: "한 입 크기로 잘라먹는 리액트",
  price: 33000,
  skill: "reactjs",
};

하지만, 변수 초기화시 객체 리터럴 사용이 아닌 변수 값을 초기화 값으로 사용하면 발생하지 않는다.
아래 코드처럼 ProgrammingBook 타입의 변수 programmingBook을 초기값으로 입력해주면 오류가 발생하지 않는다.

let book3: Book = programmingBook; // 앞서 만들어둔 변수

함수 매개변수에 인수로 값 전달

위에서 공부했듯 객체 리터럴 타입으로 매개변수에 전달하면 오류가 발생하지만,

function func(book: Book) {}

func({ // ❌ 오류 발생
  name: "한 입 크기로 잘라먹는 리액트",
  price: 33000,
  skill: "reactjs",
});

변수로 값을 전달하면 오류가 발생하지 않는다.

func(programmingBook);