[TypeScript] 타입 호환성 (Type Compatibility)

---

타입 호환성은 인터페이스를 공부할 때 꼭 짚고 넘어가야 하는 특성 중 하나이다. 타입 호환성은 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미하는 것인데, 아래 코드를 살펴보자.

interface Restaurant {
	name: string;
	star: number;
}

let pinetree: Restaurant;  // pinetree 변수 선언

let pinetreeWithAddress = {   // pinetreeWithAddress 변수 선언하고 초기화
	name: "대나무한정식",
	star: 5,
	address: "동대문",
};

pinetree = pinetreeWithAddress;

Restaurant 타입은 name과 star 두 가지의 프로퍼티만 있기 때문에  pinetree 변수에 address를 추가한 객체를 할당하면 오류가 났을 것이다.

하지만 address 프로퍼티가 추가된 pinetreeWithAddress를 pinetree 변수에 할당하면 오류가 발생하지 않는다. 이는 바로 앞서 설명한 타입 호환성 덕분인데,

pinetreeWithAddress는 이전 포스팅에서 공부했던 타입 추론에 따라 자기만의 타입을 갖게 된다. Restaurant과 같이 인터페이스 타입으로서 타입 이름이 있는 것은 아니지만, 이름이 없는 아래와 같은 구조의 타입이 된다.

{
	name: string;
	star: number;
	address: string;
}

pinetreeWithAddress의 타입과 pinetree의 타입은 서로 다른데 잘 호환되었다는 것이다.

타입이 호환되기 위한 조건은 이렇게 할당하고자 하는 타입(pinetreeWithAddress)이 할당될 타입(pinetree)의 구조와 내부 타입이 같아야 한다. 이러한 개념을 구조적 타이핑(structural typing)이라 한다.

구조적 타이핑이란 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것으로 즉, 타입스크립트는 해당 인터페이스에서 정의한 프로퍼티나 메소드를 가지고 있다면 그 인터페이스를 구현한 것으로 인정한다는 것이다.

pinetreeWithAddress는 pinetree의 구조를 모두 포함하면서 범위가 더 크다.

💡 그렇다면, 아래의 코드에서는 어떤 라인에서 에러가 발생할까?

function getStar(score: number | string, scoreNum: number) {
	const rate1: number = score;
	const rate2: number | string = scoreNum;
}

에러가 발생하는 라인은 rate1!이는 만약 score가 문자열로 전달되게 된다면 string 타입이 되기 때문에 rate1의 타입인 number에 포함되지 않는다.scoreNum의 매개변수는 숫자 타입이기 때문에 rate2의 타입인  number, string 둘 중에 하나에 포함이 되므로 타입이 호환된다!