[typescript 기본] 타입스크립트의 모듈화 ( == es6 modules) + 예제

타입스크립트의 모듈시스템이란?

es6의 modules와 동일하다!
import 해오고, export 하는 방식이다.

 

---

아래 코드를 모듈화해보았다.

 

모듈화하기1 - 간단한 예제

types.ts

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

위의 interface만 따로 떼어서 types.ts 라는 파일을 만들고,
그대로 export 해주었다.

 

app.ts

//2. app.ts
import { TodoItem } from './types'; //여기서 ts 파일 import

var item: TodoItem = {
    title: '할일',
    checked: false
}

분리한 ts 파일을 import로 불러온 다음, 그대로 사용하였다.
es6와 동일한 것을 알 수 있다.

 

---

모듈화하기2 - 여러개일때는 ? 이것또한 es6와 동일 ! !

types.ts

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

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

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

//interface 3개 export
export {
    PhoneNumberDictionary,
    Contact,
    PhoneType
}

 

app.ts

import { PhoneNumberDictionary, Contact, PhoneType } from "./types";

function fetchContacts(): Promise<Contact[]> {
    const contact: Contact[] = [
        {
            name: 'Tony',
            address: 'Malibu',
            phones: {
                home: {
                    num: 123
                },
                office: {
                    num: 456
                }
            }
        }
    ];
}

마찬가지로 사용방법은 es6와 동일한 것을 알 수 있다.