[TS] 타입 호환과 타입 모듈화

본 포스트는 인프런의 타입스크립트 입문-기초부터 실전까지 강의(링크)를 듣고 정리한 내용입니다.

타입 호환(Type Compatibility)

타입 호환이란?

특정 타입이 다른 타입에 잘 맞는지를 의미

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

interface Person {
  name: string;
}

let developer1: Developer;
let person1: Person;
developer1 = person1

• 타입 호환은 오른쪽에 있는 type이 더 많은 속성을 가지거나 구조적으로 클 때 사용 가능
• 때문에 위의 예는 developer1이 더 많은 속성을 가지므로 불가능

반대로 아래 경우는 가능

let developer1: Developer;
let person1: Person;
person1 = developer1

다른 선언자에서의 타입 호환: 인터페이스와 클래스

interface Ironman {
  name: string;
}

class Avengers {
  name: string;
}

let i: Ironman;
i = new Avengers(); // 가능하다!

• interface와 class는 다르다.
• 둘 안에 든 속성과 type이 같으므로 호환

함수 타입에서의 타입 호환성

const add = function (a: number) {
  // ...
}

const sum = function (a: number, b: number) {
  // ...
}

• sum함수의 구조가 add함수의 구조보다 크다.
• 인자를 더 크게 포함

sum = add; // 가능; add가 sum보다 더 커서 커버 가능
add = sum; // 불가능

제네릭 타입에서의 타입 호환성

interface Empty<T> {
  // ...
}
let empty1: Empty<string>;
let empty2: Empty<number>;
empty1 = empty2;
empty2 = empty1;

• 두 generic의 사용에서 type이 달라도 사용하지 않는다.
• empty1과 empty2는 호환

interface NotEmpty<T> {
  data: T;
}
let notempty1: NotEmpty<string>;
let notempty2: NotEmpty<number>;
notempty1 = notempty2;
notempty2 = notempty1;

• 두 generic의 사용에서 type이 다르면 내부 속성의 이름은 같아도 type이 다르다.
• notempty1과 notempty2는 다른 속성을 가진 객체이므로 호환되지 않는다.

타입 모듈화

모듈: 전역 변수와 구분되는 자체 유효 범위

• 현업에서는 정의한 type들을 하나의 파일에 몰아넣어 사용
• 유지보수에 더 유리

타입 모듈의 사용

JS의 import/export를 똑같이 사용하여 파일간 변수, 함수 이동

// ts-modules/types.ts
export interface Todo {
  title: string;
  checked: boolean;
}

interface의 앞에 export를 붙여서 다른 모듈에서 사용할 수 있도록 export

// ts-module/app.js
import { Todo } from './types'

const item: Todo = {
  title: '할 일 1',
  checked: false
}

types.ts의 interface를 사용하려는 경우 경로에서 interface import

여러 타입을 한 번에 export/import

// ts-module/types.ts
interface PhoneNumberDictionary {
  [phone: string]: {
    num: number;
  };
}

interface Contact {
  name: string;
  address: string;
  phones: PhoneNumberDictionary;
}

enum PhoneType {
  Home = 'home',
  Office = 'office',
  Studio = 'studio',
}

export { PhoneNumberDictionary, Contact, PhoneType };

한 줄로 간단하게 export 가능

마찬가지로 한 줄로 간단하게 import 가능

// ts-module/index.ts
import { PhoneNumberDictionary, Contact, PhoneType } from './types'