TypeScript에서 모듈 가져오기

1. TypeScript 프로젝트 만들기
2. TypeScript에서 내보내기 키워드 사용
3. TypeScript에서 import 키워드 사용
4. TypeScript에서 단일 객체 내보내기 및 가져오기
5. TypeScript에서 여러 객체 내보내기 및 가져오기
6. 결론

TypeScript를 사용하여 응용 프로그램을 개발하는 방법을 배울 때 우리는 일반적으로 서로 종속성이 없는 매우 간단한 프로그램을 만듭니다.

예를 들어 콘솔에 메시지를 기록하는 프로그램은 한 줄이며 하나의 파일에 포함됩니다. 그러나 프로덕션 등급 애플리케이션에는 여러 파일이 포함되어 있으며 이러한 파일에는 종속성이 있는 코드가 포함되어 있습니다.

개발자는 이러한 종속성을 구현하거나 TypeScript 모듈을 사용하여 타사 라이브러리에서 얻을 수 있습니다. TypeScript 문서는 모듈을 최상위 import 또는 export를 포함하는 모든 파일로 정의합니다.

최상위 import 또는 export가 포함되지 않은 파일은 파일 외부에서 코드에 액세스할 수 없음을 의미합니다. 그렇지 않으면 코드의 범위는 전역입니다.

TypeScript 프로젝트 만들기

WebStorm IDEA를 열고 파일 > 새로 만들기 > 프로젝트를 선택합니다. 열리는 창에서 왼쪽에서 Node.js를 선택하고 오른쪽에 나타나는 새 프로젝트 라벨이 있는 창에서 프로젝트 위치 섹션의 프로젝트 이름을 untitled에서 typescript-modules로 변경합니다.

마지막으로 만들기 버튼을 눌러 프로젝트를 생성합니다. 창이 열리면 보기 > 도구 창 > 터미널을 선택하거나 키보드 단축키 Alt+F12를 선택하여 새 터미널 창을 엽니다.

다음 명령을 사용하여 애플리케이션에 대한 tsconfig.json 파일을 생성합니다.

~/WebstormProjects/typescript-modules$ tsc --init

파일이 생성되면 파일의 구성이 아래와 같은지 확인하십시오. 구성을 복사하여 tsconfig.json 파일에 붙여넣을 수도 있습니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true

    }
}

TypeScript에서 내보내기 키워드 사용

typescript-modules 폴더 아래에 EmailService.ts라는 파일을 만들고 다음 코드를 복사하여 파일에 붙여넣습니다.

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

이 파일에서 각각 User 및 EmailService라는 두 개의 클래스를 생성했습니다. sendEmail() 메서드는 이메일을 보내는 작업을 시뮬레이트합니다.

sendEmail() 메서드는 User 클래스를 사용하여 이메일 메시지를 보내고 받는 사용자를 나타냅니다. 파일 외부에서 클래스에 액세스할 수 있기를 원하므로 각 클래스에 export 키워드를 접두사로 붙였습니다.

TypeScript에서 import 키워드 사용

Main.ts라는 파일을 만들고 다음 코드를 복사하여 파일에 붙여넣습니다.

import {User, EmailService} from "./EmailService"

function main(){
    let thisService = new EmailService();
    console.log(thisService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

이 파일에서 우리는 sendEmail() 메서드에서 반환된 문자열을 콘솔에 기록하는 main()이라는 함수를 만들었습니다.

이 메서드는 to, from 및 message의 세 가지 매개 변수를 허용하며 처음 두 매개 변수는 User 유형임을 나타냅니다.

이 코드를 실행하려면 이 자습서에 언급된 단계를 사용하여 새 터미널 창을 열고 다음 명령을 복사하여 터미널에 붙여넣은 다음 Enter를 누르십시오.

~/WebstormProjects/typescript-modules$ tsc && node Main.js

이 명령은 TypeScript 파일을 JavaScript 파일로 변환하고 node 런타임 환경을 사용하여 Main.js 파일을 실행합니다. 애플리케이션의 출력이 아래와 같은지 확인합니다.

message: Happy Birthday from: doe to: john

TypeScript에서 단일 객체 내보내기 및 가져오기

User.ts라는 파일을 만들고 EmailService.ts 파일의 User 클래스를 사용자 파일로 잘라냅니다. 사용자 파일의 코드를 아래와 같이 수정합니다.

class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export = User

이 코드에서는 클래스 선언에서 export 키워드를 제거하고 클래스 선언 후 export = User 문을 사용하여 정의했습니다. 이는 클래스인 이 모듈에서 단일 개체를 내보내고 있음을 보여줍니다.

또한 EmailService가 단일 개체를 내보내도록 하므로 아래와 같이 클래스에서 export 키워드를 제거하고 클래스 선언 뒤에 추가합니다.

import User = require("./User");

class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

export = EmailService

EmailService 클래스는 User 개체를 사용하므로 require() 함수를 사용하여 클래스로 가져와야 합니다. 이것이 모듈에서 단일 객체를 가져오는 방법입니다.

주목해야 할 또 다른 점은 이 가져오기 접근 방식을 사용하면 가져오는 개체가 클래스이고 함수, 인터페이스 등에 동일하게 적용되므로 new 키워드를 사용하여 클래스를 직접 호출할 수 있다는 것입니다.

변경 사항이 예상대로 작동하는지 테스트하기 위해 아래와 같이 import 문을 약간 변경하여 Main.ts 파일을 재사용합니다.

import EmailService = require("./EmailService")
import User = require("./User")

function main(){
    let newService = new EmailService();
    console.log(newService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

이 파일에서 수행한 유일한 변경 사항은 require() 기능을 사용하여 User.ts 모듈 및 EmailService.ts 모듈에서 단일 개체를 가져오는 것입니다.

이전 예제에서 사용한 것과 동일한 명령을 사용하여 애플리케이션을 실행하고 출력이 아래와 같은지 확인합니다.

message: Happy Birthday from: doe to: john

TypeScript에서 여러 객체 내보내기 및 가져오기

첫 번째 예에서 했던 것처럼 export 및 import 문을 사용하도록 이전 예를 수정합니다. EmailService.ts 및 User.ts를 포함하는 세 파일 모두에서 단일 개체 내보내기 및 가져오기를 제거합니다.

두 파일의 코드가 아래와 같은지 확인하십시오.

사용자.ts:

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

EmailService.ts:

import {User} from "./User";

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

typescript-modules 폴더 아래 AllExports.ts라는 파일을 만들고 다음 코드를 복사하여 파일에 붙여넣습니다.

export * from "./EmailService"
export * from "./User"

이 파일에서는 EmailService.ts 및 User.ts 파일에서 내보낸 모든 멤버 클래스, 인터페이스 및 기능을 다시 내보냅니다. 모듈에는 클래스 선언만 포함되어 있으므로 이 파일에서 클래스를 내보내고 있습니다.

이 모듈을 사용하여 단일 import 문을 사용하여 Main.ts 파일에 선언된 모든 모듈을 가져옵니다. 이를 달성하려면 Main.ts 파일 코드가 아래와 같은지 확인하십시오.

import * as emailManager from "./AllExports"

function main(){
    let newService = new emailManager.EmailService();
    console.log(newService.sendEmail(
        new emailManager.User("john"),
        new emailManager.User("doe"),
        "Happy Birthday"));
}
main();

* as 구문을 사용하여 AllExports.ts 파일에 정의된 모든 모듈을 가져오는 방법에 유의하십시오. 별표 *는 파일의 모든 내보내기를 가져오도록 컴파일러에 알리고 as 키워드는 가져온 내보내기에 대한 사용자 정의 개체 이름을 만듭니다.

이전 예제에서 new 키워드를 사용하여 개체를 호출했습니다. 그러나 이 예에서는 작동하지 않습니다.

개체의 구성원 세부 정보에 액세스하려면 개체의 점 .을 사용해야 합니다. 우리의 경우에는 EmailService 및 User 클래스입니다.

emailManager 개체에서 new 키워드를 사용하려고 하면 이 표현식은 구성할 수 없습니다라는 경고가 표시됩니다. 이 코드를 실행하고 출력이 아래와 같은지 확인하십시오.

message: Happy Birthday from: doe to: john

결론

이 튜토리얼은 TypeScript에서 모듈로 작업하는 방법을 알려줍니다. 다루는 주제에는 내보내기 및 가져오기 키워드 사용과 단일 및 다중 개체에 대한 내보내기 및 가져오기가 포함됩니다.