[TS] 타입스크립트 - 타입 호환

타입 호환 Type Compatibility

---

💡 자바스크립트는 객체 리터럴이나 익명 함수 등을 사용하기 때문에 명시적으로 타입을 지정하는 것보다 코드의 구조 관점에서 타입을 지정하는게 더 잘 어울릴 수도 있다.

 

타입스크립트에서 다른 타입 간에 호환 여부를 점검하는 것을 타입 호환이라고 한다. 아래 Avengers 클래스는 Ironman 인터페이스를 상속받아 구현한 게 아닌데도 에러가 발생하지 않는다. 타입스크립트에선 타입에 정의되어 있는 속성의 타입을 가지고 코드가 호환되는지 확인하기 때문이다.

interface Ironman {
  name: string;
}

class Avengers {
  name: string;
}

let ironMan: Ironman;
ironMan = new Avengers(); // ok 타입 호환

 

구조적 타이핑 Structural typing

---

💡 객체 속성, 함수 파라미터 등이 비교하는 대상보다 더 많다면 구조적으로 더 크다고 볼 수 있다.

 

코드 구조 관점에서 타입이 서로 호환되는지 판단하는 것을 구조적 타이핑이라고 한다. 아래 예제에서 capt 객체와 Avengers 인터페이스 모두 name 속성이 있기 때문에 capt와 hero 타입은 서로 호환된다. 더 엄밀하게 말하면 capt 객체 타입이 구조적으로 Avengers 보다 크기 때문에 hero에 할당(호환)될 수 있는 것.

interface Avengers {
  name: string;
}

let hero: Avengers;

const capt = { name: "Captain", location: "Seoul" };
hero = capt; // ok 타입 호환

 

함수 호출 역시 마찬가지다. capt 객체에 name 속성이 있으므로 assemble 함수의 인자로 넘길 수 있다.

function assemble(param: Avengers) {
  console.log(param.name);
}

assemble(capt); // 'Captain' (타입 호환)

 

타입 호환 예제

---

Interface / Class (객체 속성)

💡 interface / class / 객체 등에서 할당 연산자의 우항(右项)이 구조적으로 더 크다면 타입은 호환될 수 있다.

 

아래 developer = person 코드에서 오른쪽에 있는 person 타입을 developer에 할당하려고 하면 에러가 발생한다(타입 호환 불가). developer에서 필요한 skill 속성을 person이 가지고 있지 않기 때문이다. 즉, 구조적으로 더 작은 person을 developer에 할당하려고 해서 발생하는 에러다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
}

let developer: Developer;
let person: Person;

developer = person; // Error! 타입 호환 불가
// TS2741: Property 'skill' is missing in type 'Person' but required in type 'Developer'.

person = developer; // ok 타입 호환

 

Person 인터페이스를 클래스로 바꿔도 결과는 동일하다. 타입스크립트에서 타입 호환을 검증할 때 내부에 존재하는 속성과 타입에 대해서만 비교한다. interface, type, class 등은 상관없다.

interface Developer {
  name: string;
  skill: string;
}

class Person {
  name: string;
}

let developer: Developer;
let person: Person;

developer = new Person(); // Error! 타입 호환 불가
// TS2741: Property 'skill' is missing in type 'Person' but required in type 'Developer'.

 

Function / Generic (함수 파라미터)

💡 function / generic 에서 할당 연산자의 좌항(左项)이 구조적으로 더 크다면 타입은 호환될 수 있다.

 

아래 예시에서 sum을 add에 할당하려고 하면 에러가 발생한다(타입 호환 불가). add는 1개 인자만 받을 수 있는데 sum은 2개 인자를 받기 때문이다(sum이 add보다 구조적으로 더 크다). interface / class 등과는 반대로 할당되는 값(할당 연산자에서 우항)이 구조적으로 더 작아야 타입이 호환된다.

let add = function (a: number) {};
let sum = function (a: number, b: number) {};

add = sum; // Error! 타입 호환 불가
// TS2322: Type '(a: number, b: number) => void' is not assignable to type '(a: number) => void'.

sum = add; // ok 타입 호환

 

제네릭에선 타입 인자 <T>가 속성에 할당됐는지를 기준으로 타입 호환 여부를 판단한다. 인터페이스에 아무런 속성도 없다면 타입스크립트는 같은 타입으로 간주한다.

interface Empty<T> {}

let x: Empty<number>;
let y: Empty<string>;

x = y; // OK, because y matches structure of x

 

인터페이스에 속성(멤버 변수)이 있고, 제네릭의 타입 인자가 할당되었다면 서로 다른 타입으로 간주한다.

interface NotEmpty<T> {
  data: T;
}

let x: NotEmpty<number>;
let y: NotEmpty<string>;

x = y; // Error! because x and y are not compatible

 

기타 참고 내용

---

이넘 타입은 number 타입과 호환되지만, 같은 이넘 타입끼리는 호환되지 않는다

enum Status {
  Ready,
  Waiting,
}

enum Color {
  Red,
  Blue,
  Green,
}

let status = Status.Ready;
status = Color.Green; // Error! TS2322: Type 'Color.Green' is not assignable to type 'Status'.

 

클래스 타입은 인스턴스 멤버(프로퍼티)들을 비교한다. static 멤버와 생성자는 비교 대상에서 제외된다. 

class Hulk {
  handSize: number; // 속성
  constructor(name: string, numHand: number) {}
}

class Captain {
  handSize: number; // 속성
  constructor(numHand: number) {}
}

let a: Hulk;
let b: Captain;

a = b; // ok
b = a; // ok

 

타입스크립트는 컴파일 시점에 추론할 수 없는 타입들을 일단 안전하다고 가정한다. 이러한 특성 때문에 타입스크립트의 타입 시스템은 완전히 "sound"(안전한) 하지 않다고 여겨진다. "sound" 용어는 타입 시스템이 모든 가능한 타입 오류를 성공적으로 검출할 수 있을 때 사용되며, 타입스크립트는 이런 면에서 어느 정도 한계를 가지고 있다는 점을 인지해야 한다. 

 

레퍼런스

---

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요