[TypeScript] 타입스크립트의 모듈 시스템

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다.

타입스크립트의 모듈 시스템에 대해 알아보자, 우선 모듈회란.. export / import 형태로 다른 파일에 있는 타입스크립트 파일을 특정 파일에서 사용할 수 있게 하는 것을 의미한다.

기본 틀

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

// app.ts
import { Todo } from './types';

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

types.ts에서 인터페이스를 정의한 뒤 이를 export하여 app.ts에서 import해 오면, 타입 지정을 import해온 값 이름으로 정의할 수 있다.

 

모듈화의 두 가지 방법: 각각 or 한번에

// index-type.ts

interface PhoneNumberDictionary {
    [phone: string]: {
      num: number;
    };
  }

export interface Contact { // Contact 인터페이스 export
    name: string;
    address: string;
    phones: PhoneNumberDictionary;
}

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

// index.ts
import { Contact, PhoneType } from './index-type';

// index-type.ts
(상동)
export { Contact, PhoneType };

이렇게 export하고 싶은 것만 골라서 export를 하는 방식이 있지만.. 굳이 이걸 쓸 필요는 없다. 아래에서 한꺼번에 export해주면 되기 때문이다.