모듈 (Module)

모듈 (Module) - export/import

TypeScript는 기본적으로 모두 변수와 함수, 타입이 전역적(Global Scope)으로 사용되기 때문에, 복수 개의 TypeScript 파일(*.ts)이 있을 때, 변수와 타입 사용에 있어 서로 충돌하거나 예기치 않게 다른 파일의 변수를 변경하는 등의 문제를 가질 수 있다. 이러한 문제를 해결하게 위해 모듈(module)과 네임스페이스(namespace)를 사용할 수 있다.

export

모듈(module)은 하나의 파일 안에서 지역적으로 사용되는 변수, 함수, 타입 등을 만드는 것으로, 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);      
본 웹사이트는 광고를 포함하고 있습니다. 광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.