Использование Typescript Модулей из Javascript

Я хотел бы создать проект с использованием модулей Typescript, но разрешить его использовать из javascript с помощью ванили.

Предположим, что он содержит 3 модуля, каждый из которых содержит один класс, 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 файл с webpack. Я хотел бы, чтобы пользователь библиотеки мог делать что-то похожее на

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

Как бы я это сделал, в конечном итоге цель состоит в том, чтобы иметь возможность использовать модули Typescript, но предоставить библиотеку, используемую из vanilla js.

Ответы

Ответ 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;
  }
}

В JavaScript вы должны:

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 вам придется экспортировать его в виде библиотеки. Для этого вы можете использовать конфигурацию libraryExport вместе с параметрами library и libraryTarget. См.: https://webpack.js.org/configuration/output/#output-libraryexport

Спасибо @Ghabriel Nunes, который сообщил мне, что module теперь называется namespace s.