자바 스크립트의 Typescript 모듈 사용

Question

Typescript 모듈을 사용하여 프로젝트를 만들고 싶습니다. 그러나 바닐라 자바 ​​스크립트에서 사용하도록 허용합니다.

각 모듈에는 단일 클래스 인 A, B 및 C이 포함되어 있습니다.

즉

A.ts :

export default class A { 
    /* things */ 
} 

B.ts :

export default class B { 
    /* things */ 
} 

C.ts :

이들 모두에 내장하고 번들로 제공됩니다

export default class C { 
    /* things */ 
} 

하나의 dist.js 파일 bpack. 내가 어떻게 내가이 일에 대해 갈 것이라고

<script src="dist.js"></script> 
<script> 
    var foo = new LettersLibrary.A(); 
</script> 

에 가깝다 뭔가를 할 수 있도록 라이브러리의 사용자가 원하는 궁극적 목표는 타이프 모듈을 활용 개발할 수 있지만, 라이브러리를 제공하는 것입니다 바닐라 js에서 사용할 수 있습니다.

Answer 1

여기에 TypeScript 네임 스페이스를 사용하십시오. 클래스를 선언 한 다음 모듈 내부에서 클래스를 내보낼 수 있습니다. 그러면 사용자가 원하는대로 사용할 수 있습니다.

는

https://www.typescriptlang.org/docs/handbook/namespaces.html

예 :

자바 스크립트에서

namespace LettersLibrary { 
    export class A { 
    hello = "Hello World"; 
    } 

    export class B { 
    myBool = false; 
    } 

    export class C { 
    someInt = 42; 
    } 
} 

, 당신이 다음 할 것이다 : 당신은 다시 수출하는 다른 파일에서 수업을해야하는 경우

const instance = new LettersLibrary.A(); 
console.log (instance.hello); // "Hello World" 

, 방금 가져온 클래스를 수출 const 으로 입력하고을 입력하십시오 (TypeScript 개발에 유용합니다. 그렇지 않으면 입력란의 유형을 사용할 수 없습니다. 모듈) :

import importA from "..."; 
import importB from "..."; 
import importC from "..."; 

namespace LettersLibrary { 
    export const A = importA; 
    export type A = importA; 

    // Same for B and C 
} 

WebPack을 사용하는 경우 라이브러리로 내 보내야합니다. 이를 위해 및 libraryTarget 옵션과 함께 libraryExport 구성을 사용할 수 있습니다. 참조 : https://webpack.js.org/configuration/output/#output-libraryexport

덕분에 @ Ghabriel Nunes에게 누가 module이 이제 namespace이라고 명명되었습니다.