TypeScript-섹션3. 타입스크립트 이해하기- 객체 타입의 호환성(4)

손주완·2025년 7월 9일

TypeScript Section3

목록 보기
3/8

1. 객체 타입의 호환성

모든 객체 타입은 각각 다른 객체 타입들과 슈퍼-서브 타입 관계를 갖는다.
따라서 업 캐스팅은 허용하고 다운 캐스팅은 허용하지 않습니다.

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

언뜻 보면 Dog 타입이 더 많은 프로퍼티를 정의하고 있어 슈퍼타입처럼 보일 수 있지만 그 반대
당연히 Animal타입이 더 포괄적인 개념이기에 Dog타입보다 프로퍼티 수가 적어야 함.

2. 초과 프로퍼티 검사

초과 프로퍼티 검사란 변수를 객체 리터럴로 초기화 할 때 발동하는 타입스크립트의 특수한 기능.
이 기능은 타입에 정의된 프로퍼티 외의 다른 초과된 프로퍼티를 갖는 객체를 변수에 할당할 수 없도록 막음.

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

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

(...)

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

**왜 Book 타입으로 지정해도 안될까? -> Book 타입에 skill 프로퍼티는 정의 되지 않았으니, 초과 프로퍼티 검사가 발동

이를 해결하기 위해,
**값을 별도의 다른 변수에 보관한 다음 변수 값을 초기화 값으로 사용

let programmingBook: ProgrammingBook = {
	name: "책 이름",
    price: 20000,
    skill: "react",
};

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

위의 문제는 함수의 매개변수에도 동일하게 발생.

function func(book: Book) {}

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

아래와 같이 미리 값을 담아둔 변수를 인수로 전달
func(programmingBook);

0개의 댓글