TypeScript
모듈 - 내보내기 및 가져 오기

Hello world 모듈

//hello.ts
export function hello(name: string){
    console.log(`Hello ${name}!`);
} 
function helloES(name: string){
    console.log(`Hola ${name}!`);
}
export {helloES};
export default hello;

디렉토리 색인을 사용하여로드

디렉토리에 index.ts 라는 파일이 있으면 디렉토리 이름 만 사용하여로드 할 수 있습니다 ( index.ts 파일 이름은 선택 사항 임).

//welcome/index.ts
export function welcome(name: string){
    console.log(`Welcome ${name}!`);
}

정의 된 모듈의 사용 예

import {hello, helloES} from "./hello";  // load specified elements
import defaultHello from "./hello";      // load default export into name defaultHello
import * as Bundle from "./hello";       // load all exports as Bundle
import {welcome} from "./welcome";       // note index.ts is omitted

hello("World");                          // Hello World!
helloES("Mundo");                        // Hola Mundo!
defaultHello("World");                   // Hello World!

Bundle.hello("World");                   // Hello World!
Bundle.helloES("Mundo");                 // Hola Mundo!

welcome("Human");                        // Welcome Human!

선언 내보내기 / 가져 오기

모든 선언 (변수, const, 함수, 클래스 등)은 다른 모듈에서 가져 오기 위해 모듈에서 내보낼 수 있습니다.

Typescript는 명명 된 이름과 기본값이라는 두 가지 내보내기 유형을 제공합니다.

명명 된 내보내기

// adams.ts
export function hello(name: string){
    console.log(`Hello ${name}!`);
}
export const answerToLifeTheUniverseAndEverything = 42;
export const unused = 0;

명명 된 내보내기를 가져올 때 가져올 요소를 지정할 수 있습니다.

import {hello, answerToLifeTheUniverseAndEverything} from "./adams";
hello(answerToLifeTheUniverseAndEverything);   // Hello 42!

기본 내보내기

각 모듈은 하나의 기본 내보내기를 가질 수 있습니다.

// dent.ts
const defaultValue = 54;
export default defaultValue;

이는 다음을 사용하여 가져올 수 있습니다.

import dentValue from "./dent";
console.log(dentValue);        // 54

번들로 가져 오기

Typescript는 전체 모듈을 변수로 가져 오는 메소드를 제공합니다.

// adams.ts
export function hello(name: string){
    console.log(`Hello ${name}!`);
}
export const answerToLifeTheUniverseAndEverything = 42;

import * as Bundle from "./adams";
Bundle.hello(Bundle.answerToLifeTheUniverseAndEverything);  // Hello 42!
console.log(Bundle.unused);                                 // 0

재수출

Typescript를 사용하면 선언을 다시 내보낼 수 있습니다.

//Operator.ts
interface Operator {
    eval(a: number, b: number): number;
}
export default Operator;

//Add.ts
import Operator from "./Operator";
export class Add implements Operator {
    eval(a: number, b: number): number {
        return a + b;
    }
}

//Mul.ts
import Operator from "./Operator";
export class Mul implements Operator {
    eval(a: number, b: number): number {
        return a * b;
    }
}

모든 작업을 단일 라이브러리에 묶을 수 있습니다.

//Operators.ts
import {Add} from "./Add";
import {Mul} from "./Mul";

export {Add, Mul};

명명 된 선언 은 짧은 구문을 사용하여 다시 내보낼 수 있습니다.

//NamedOperators.ts
export {Add} from "./Add";
export {Mul} from "./Mul";

기본 내보내기 를 내보낼 수도 있지만 짧은 구문을 사용할 수 없습니다. 모듈 당 하나의 기본 내보내기 만 가능하다는 점을 기억하십시오.

//Calculator.ts
export {Add} from "./Add";
export {Mul} from "./Mul";
import Operator from "./Operator";

export default Operator;

번들로 가져 오기를 다시 내보낼 수 있습니다.

//RepackedCalculator.ts
export * from "./Operators";

번들을 다시 내보낼 때 명시 적으로 선언하면 선언이 무시 될 수 있습니다.

//FixedCalculator.ts
export * from "./Calculator"
import Operator from "./Calculator";
export class Add implements Operator {
    eval(a: number, b: number): number {
        return 42;
    }
}

사용 예제

//run.ts
import {Add, Mul} from "./FixedCalculator";

const add = new Add();
const mul = new Mul();

console.log(add.eval(1, 1)); // 42
console.log(mul.eval(3, 4)); // 12