객체타입의 호환성 / 초과프로퍼티검사 -> 객체리터럴이 아닌 인수로 전달하기

백아름·2023년 7월 12일
0

프론트엔드

목록 보기
67/80

  • animal 타입: 수퍼타입
  • dog 타입: 써브타입

2개의 type이 있고, 공통 property를 공유하며, 한 타입이 property 개수가 더 많은 경우.

  • property가 많은 애가 subtype이 되는 것
    : 넘 당연한 이치같긴하지만 메모해둠..ㅋ

초과 프로퍼티 검사

초과 프로퍼티 검사란?

변수를 초기화할 때, 초기화하는 값으로 객체 리터럴을 사용하면 발동하는 검사임.

  • 객체 타입을 초기화할 때 아래와 같이 객체 리터럴을 사용하면 skill과 같은 초과 프로퍼티 즉, 실제 타입에는 정의해놓지 않은 프로퍼티를 작성하면 안되도록 막는 검사임.
let book2: Book = {
  name: "한입크기로 잘라먹는 리액트",
  price: 33000,
  //   skill: "reactjs",
};
  • 따라서 객체타입의 변수를 초기화할 때는 딱 타입에서 정의한 프로퍼티만 작성해주어야 함.

초과 프로퍼티 검사를 피하고 싶다면?

  • 아래 코드를 살펴보면, programmingBook과 같은 변수를 할당하면 객체리터럴을 사용하지 않은 것이기 때문에 이런 경우는 허용이 됨.
  • 함수를 만들어서 전달인자에 인수를 전달할 때도 마찬가지임. 전달인자에 객체리터럴을 사용하면 초과프로퍼티검사에 걸리기 때문에 변수에 저장해뒀다가, 인수로 전달해주어야 에러가 뜨지 않음.

즉, 중요한 것은 객체 리터럴로 직접 전달을 하느냐 아니면 인수를 통해서 간접적으로 전달을 하느냐에 차이임. -> 인수로 전달해야 초과프로퍼티검사에 걸리지 않습니다!


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

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

let book: Book;
let programmingBook: ProgrammingBook = {
  name: "한 입 크기로 잘라먹는 리액트",
  price: 33000,
  skill: "reactjs",
};

book = programmingBook;
// programmingBook = book;

//초과 프로퍼티 검사: 변수를 초기화할 때 초기화하는 값으로 `객체 리터럴`을 사용하면 발동하는 검사임.
// 객체 타입을 초기화할 때 아래와 같이 객체 리터럴을 사용하면 skill과 같은 초과 프로퍼티 즉, 실제 타입에는 정의해놓지 않은 프로퍼티를 작성하면 안되도록 막는 검사임.
// 따라서 객체타입의 변수를 초기화할 때는 딱 타입에서 정의한 프로퍼티만 작성해주어야 함.
// 초과 프로퍼티 검사를 피하고 싶다면?
// : 아까 만들어뒀던 programmingBook과 같은 변수를 할당하면 객체리터럴을 사용하지 않은 것이기 때문에 이런 경우는 허용이 됨.

let book3: Book = programmingBook;

//함수를 만들어서 전달인자에 인수를 전달할 때도 마찬가지임. 전달인자에 객체리터럴을 사용하면 초과프로퍼티검사에 걸리기 때문에 변수에 저장해뒀다가, 인수로 전달해주어야 에러가 뜨지 않음.
// 즉, 중요한 것은 객체 리터럴로 직접 전달을 하느냐 아니면 인수를 통해서 간접적으로 전달을 하느냐에 차이임.

function func(book: Book) {}
func({
  name: "한입크기로 잘라먹는 리액트",
  price: 33000,
  //skill: "reactjs",
});

func(programmingBook);


let book2: Book = {
  name: "한입크기로 잘라먹는 리액트",
  price: 33000,
  //   skill: "reactjs",
};
profile
곧 훌륭해질 거에요!

0개의 댓글

관련 채용 정보