📃 타입스크립트 입문 09 : 타입 호환에 대해서 알아보기

🎈 타입호환 이란?

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

interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
}
var developer: Developer;
var person : Person;

person = developer;

이렇게 Developer와 Person의 인터페이스를 생성하고 중복되는 속성은 name뿐이다. Developer는 name과 skill이라는 속성이 총 2개나 있고, Person은 name이라는 속성 1개뿐. 만약 위에는 인터페이스를 선언하고 아래는 클래스를 선언해도 실제로 이 두 개의 타입은 같다고 한다. 타입에 정의되어 있는 타입을 가지고 실제로 호환 되는지를 점검하는데 이런 것을 공식문서에서는 구조적 타이핑이라고 한다.

 

이렇게 됐을 때,

person = developer;

이처럼 오른쪽에는 더 많은 속성을 가지고 있거나 더 큰 관계를 갖고 있을 때에 왼쪽과 호환이 된다.  더 객체가 많은 속성을 가진, 구조적으로 더 큰 관계를 갖고 있기 때문이다.

 

🎇 다른 예시 01

var add = function(a: number) {
  console.log(a);
}

var sum = function(a: number, b: number) {
  return a + b;
}

여기서 add와 sum의 차이점은 sum함수가 파라미터 한 개가 더 들어있다. 그래서 sum이라는 함수 자체가 add라는 함수보다 더 크다고 볼 수 있다. 크다라는 의미는 추가적으로 옵션들을 더 제공한다.

 

🎇 다른 예시 02

interface Empty<T> {

}
var empty1: Empty<string>;
var empty2: Empty<number>;
empty1 = empty2;
empty2 = empty1;

맨 위에 인터페이스는 안에 값이 비어있어서 어떤 값이 들어와도 동일한 타입이라고 간주한다. 

 

🎇 다른 예시 03 : 제네릭

interface NotEmpty<T> {
  data:T;
}
var notEmpty1: NotEmpty<string>;
var notEmpty2: NotEmpty<number>;
notEmpty1 = notEmpty2;
notEmpty2 = notEmpty1;

이렇게 제네릭으로 인터페이스 호출해주면 타입이 바뀐걸로 간주되어 서로 타입 호환이 되지 않아 에러가 난다.