[Typescript] 타입스크립트 타입 호환

타입 호환

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지, 타입스크립트에서 두 개의 코드 타입이 서로 호환이 되는지를 점검하는 것을 타입 호환이라고 한다.

타입 호환은 타입 그 자체가 아니라 타입의 구조가 호환이 된다면 타입 호환이 된다. 이를 구조적 타이핑이라고 한다.

구조적 타이핑

코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것

아래의 Ironman과 Avengers는 인터페이스와 클래스로 서로 타입이 다르지만, 타입 안의 구조가 같으므로 타입 호환이 된다.

interface Ironman {
  name: string;
}

class Avengers {
  name: string;
}

let i: Ironman;
i = new Avengers();

---

타입 호환 예제

객체

객체나 객체의 인터페이스, 클래스의 타입 호환은 구조적으로 같거나, 더 큰 데이터를 할당할 때만 타입 호환이 된다.
구조적으로 더 작은 데이터는 타입 호환이 되지 않는다.

interface Menu {
	name: string;
	price: number;
}

let cafe: Menu;

let cafeWithAddress = {
	name: "아메리카노",
	price: 3000,
	address: "남양주",
};

let cafeMenu = {
  name: "아메리카노"
};

cafe = cafeWithAddress; ⭕️
cafe = cafeMenu; ❌

Menu 인터페이스는 name과 price 두 가지의 프로퍼티만 있기 때문에 cafe 변수에 address 프로퍼티를 추가한 객체를 할당하면 에러가 나게 된다.

하지만 address 프로퍼티가 추가된 cafeWithAddress 를 cafe 변수에 할당하면 타입 호환이 되기 때문에 오류가 발생하지 않는다.

그러나 자신보다 작은 구조의 데이터는 호환되지 않으므로, name 프로퍼티만 있는 cafeMenu는 변수 cafe 에 할당이 되지 않는다.

함수

함수의 타입 호환은 객체와 반대로 구조적으로 같거나, 더 적은 데이터를 할당할 때만 타입 호환이 된다.

var add = (a: number) => {
  //...
};
var sum = (a: number, b: number) => {
  //...
};

add = sum; //❌ 하나의 파라미터를 받는 add()는 2개의 파라미터를 받는 sum()을 받을 수 없다.
sum = add; //⭕️ 더 적은 파라미터를 받는 함수는 타입 호환이 된다.

---

참고 페이지
https://bohyunkang.tistory.com/40