모듈 (Module) - export/import

TypeScript는 기본적으로 모두 변수와 함수, 타입이 전역적(Global Scope)으로 사용되기 때문에, 복수 개의 TypeScript 파일(*.ts)이 있을 때, 변수와 타입 사용에 있어 서로 충돌하거나 예기치 않게 다른 파일의 변수를 변경하는 등의 문제를 가질 수 있다. 이러한 문제를 해결하게 위해 모듈(module)과 네임스페이스(namespace)를 사용할 수 있다. 모듈은 전역적(Global) 범위가 아닌 자기 자신의 범위(scope) 안에서 실행된다. 모듈은 모듈 안에서 정의된 변수, 함수, 클래스, 인터페이스 등은 외부에서 사용될 수 없는데, 외부 사용을 위해서는 export를 해서 사용을 허용해야 한다. TypeScript에서 모듈은 파일 안에 (top-level) export 혹은 import를 선언하면 모듈로 취급한다. 만약 파일 안에 export 혹은 import가 없으면 이는 전역적 범위를 갖는 스크립트로 취급된다.

export

모듈(module)은 하나의 파일 안에서 지역적으로 사용되는 변수, 함수, 타입 등을 만드는 것으로, export 혹은 import 라는 키워드를 사용하여 모듈임을 표시한다. export는 모듈의 변수, 함수, 타입 등을 외부 모듈이 사용할 수 있도록 표시한 키워드이다. 예를 들어, 아래 예제에서 count 변수, Person 클래스, showNextCount 함수는 모두 앞에 export 키워드가 붙어 있는데, 이들은 다른 모듈에서 import 해서 사용할 수 있다. 하지만 seq 변수는 export가 없기 때문에 module1.ts 내에서만 사용할 수 있다.

    // module1.ts 파일
    export let count: number = 1;
    export class Person {
        name: string;
    }
    export function showNextCount() {
        count++;
        console.log(count);
    }
    
    var seq = 0;

import

다른 모듈에 있는 변수나 타입, 함수 등을 불러와 사용하기 위해서는 import를 사용한다. 즉, import 키워드 뒤의 괄호 { } 안에 import하고자 하는 변수, 함수, 타입 등을 나열하고, from 뒤에 모듈명을 적으면 된다. 아래 예제는 위에서 export한 변수, 함수, 클래스를 import 하여 사용하는 예이다.

    import { Person, count, showNextCount } from './module1';

    let p = new Person();
    p.name = "Tom";
    
    showNextCount();
    
    // seq는 에러
    // var n = seq;

만약 해당 모듈의 모두 것을 import 하기 위해서는, 아래와 같이 asterisk(*)를 사용하면 된다. 즉, import * as mod1 과 같이 * as 뒤에 해당 모듈의 별명(alias)를 적고, 이후 "mod1."를 export된 변수, 함수, 타입 앞에 붙여 사용한다.

    import * as mod1 from './module1';

    let p = new mod1.Person();
    mod1.showNextCount();    

만약 export된 변수, 함수, 타입 등에 대해 별명(alias)를 사용하고 싶으면, 아래와 같이 as 를 사용하여 alias를 지정할 수 있다.

    import { Person as Man, count as counter} from './module1';
    let p = new Man();
    console.log(counter);      

Default Export

모듈 안에서 export를 지정할 때, "export default" 와 같이 하나의 디폴트 export를 지정할 수 있다. 디폴트 export는 import 하는 쪽에서 그 디폴트 export된 대상(클래스, 함수, 변수 등)을 바로 사용할 수 있도록 한다. 디폴트 export는 모듈 안에서 단 하나 존재해야 한다.

    // module1.ts 파일
    export let count: number = 1;
    
    export default class Person {   //디폴트 export
        name: string;
    }
    export function showNextCount() {
        count++;
        console.log(count);
    }
    
    var seq = 0;

    // module2.ts 파일
    import pers from './module1';
    let p = new pers();    // pers는 module1의 Person을 가리킴.