Introduction to TypeScript modules

타입스크립트 모듈은 선언과 코드를 모두 가지고 있음. 모듈은 글로벌 scope에서 실행되는게 아리나 자신만의 scope에서 실행됨. 모듈 안에서 변수, 함수, 클래스, 인터페이스를 선언하면 export로 export하지 않는 이상 모듈 밖에서는 보이지 않음.

따라서 모듈에 있는 변수, 함수, 클래스를 사용하고 싶으면 import로 가져오면됨.

Creating a new module

아래는 Validator.ts라는 모듈을 생성하고 거기에 Validator라는 인터페이스를 선언했음.

export interface Validator {
    isValid(s: string): boolean
}

이 모듈에서 export 키워드를 interface 키워드 뒤에 사용해서 이 인터페이스가 다른 모듈에서 사용할 수 있도록 했음. export를 안써주면 Validator 인터페이스는 Validator.ts 모듈에서만 사용가능함.

Export statements

아래처럼 export 할 수도 있음.

interface Validator {
    isValid(s: string): boolean
}

export { Validator };

또한 아래처럼 Validator를 StringValidator로 이름을 바꿔서 export도 가능함.

export { Validator as StringValidator };

Importing a new module

모듈을 가져오려면 import를 사용하면 됨. 아래는 Validator.ts 모듈을 사용하는 EmailValidator.ts임.

import { Validator } from './Validator';

class EmailValidator implements Validator {
    isValid(s: string): boolean {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(s);
    }
}

export { EmailValidator };

모듈을 import 할때 아래처럼 이름을 바꿔서 가져올 수 있음.

import { Validator as StringValidator } from './Validator';

Importing types

아래는 Types.ts 모듈에서 타입을 선언한 것임.

export type alphanumeric = string | number;

alphanumeric 타입을 Types.ts에서 가져오려면 import type을 쓰면됨.

import type {alphanumeric} from './Types';

타입스크립트 버전이 3.8 아래면 import를 사용해야함.

import {alphanumeric} from './Types';

Importing everything from a module

모듈에서 전부 가져오려면 아래처럼 하면됨.
*로 싹다 가져오는거 지양하기.

// TestModule.ts
export let aacpc = 33;

// app.ts
import * as testm from './TestModule';
console.log(testm.aacpc);

// Output: 
33

Re-exports

아래는 Validator.ts모듈을 사용하는 ZipCodeValidator.ts 모듈임.

import { Validator } from './Validator';

class ZipCodeValidator implements Validator {
    isValid(s: string): boolean {
        const numberRegexp = /^[0-9]+$/;
        return s.length === 5 && numberRegexp.test(s);
    }
}

export { ZipCodeValidator };

EmailValidator와 ZipCodeValidator 모듈을 아래와 같이해서 FormValidator.ts에서 두 모듈을 싸서 export 할 수 있음.

// FormValidator.ts
export * from "./EmailValidator";
export * from "./ZipCodeValidator";

// app.ts
import * as formv from './FormValidator';
let email = 'john.doe@typescripttutorial.net';
let validator = new formv.EmailValidator();
let resultx = validator.isValid(email);
console.log(resultx);

// Output:
true

Default Exports

타입스크립트는 각각의 모듈이 하나의 default export를 할 수 있게 해줌. export를 default export로 만드려면 default 키워드를 사용하면 됨.
아래는 ZipCodeValidator를 default export로 하는 예시임.

import { Validator } from './Validator';

export default class ZipCodeValidator implements Validator {
    isValid(s: string): boolean {
        const numberRegexp = /^[0-9]+$/;
        return s.length === 5 && numberRegexp.test(s);
    }
}

아래는 app.ts에서 default로 export 된 ZipCodeValidator를 사용하는 예시임.

import ZipCodeValidator from './ZipCodeValidator';

let validator = new ZipCodeValidator();
let result = validator.isValid('95134');

console.log(result);

// Output:
true

default export는 import 할때 {}없이 가져올 수 있음.

// test.js
let k; export default k = 12;

// some other file
import m from './test'; // default export 이기 때문에 원래 이름인 k대신에 m 사용 가능함.
console.log(m);

// Oupput:
12

Summary

• 타입스크립트 모듈은 선언과 코드를 둘 다 가질 수 있음
• 모듈에서 변수, 함수, 클래스, 인터페이스 등은 global scope에서 실행되는게 아니라 모듈의 scope에서 실행됨.
• export를 사용해서 변수, 함수, 클래스, 인터페이스, 타입등을 모듈에서 export 할 수 있음.
• import를 통ㄹ해서 다른 묘듈의 exports들을 가져올 수 있음.

출처1
출처2