web-dev-qa-db-ja.com

typescript：モジュールからデフォルトのエクスポートをインポート

次の定義タイプファイルがあります。

// index.d.ts
declare module 'Transformer' {
  class EditableElement {
      constructor(target: SVGPoint);
  }
  export = EditableElement;
}

そして、EditableElementをインポートしたいと思います。しかし、次の行を書くと：

import {EditableElement} from 'Transformer';

次のエラーが表示されます：

モジュール "Transformer"は非モジュールエンティティに解決され、この構成を使用してインポートできません。

EditableElementクラスをインポートするにはどうすればよいですか？実はそのクラスを活用したいだけなのです。 importディレクティブがコードに付随的な影響を及ぼしたくありません。私はそれを使いたいだけです： '（

typescriptimportexportdefault
10
Cequiel

これはES6/CommonJSの相互運用に該当します。

私の推奨は、相互運用性に依存せず、代わりに古い構文を使用することです。

const EditableElement = require('Transformer')

Es6/es2015をターゲットにする必要がある場合は、次のことを実行できます。

import * as EditableElement from 'Transformer'

// with `allowSyntheticDefaultImport`
import EditableElement from 'Transformer'

更新：[email protected]がリリースされたため、import EditableElement from 'Transformer'を直接実行できるようになりました。

tsconfig.jsonでesModuleInteropをオンにしてください

10
unional

declare moduleは、独自のTypeScriptモジュールでの使用が非推奨です。exportまたはexport defaultのいずれかを使用する必要があります。

export class EditableElement {
      constructor(target: SVGPoint);
  }

インポートには、import {EditableElement} from 'Transformer';またはimport * as EditableElement from 'Transformer';を使用できます

1
Bogdan Surai

これを次のように考えたい。

シナリオ1-明示的なもののエクスポート/インポート（デフォルトのエクスポートではありません。そのため、インポート名を「{}」で囲む必要があります。

// Export (fileX)
export const something = 'hello world';

// Import (fileY)
import { something } from 'fileX';

シナリオ2-デフォルトをエクスポート/インポートします（これにより、インポート名を「{}」で囲む必要がなくなります）。選択した名前（以下の「何か」）は、インポートにアクセスするためのエイリアスになります。

// Export (fileX)
export default 'hello world';

// Import (fileY)
import something from 'fileY';
0
Dean Martin

そのような参照パスはありますか？

 /// <reference path="*/**/myModules.d.ts" />
 import * as m from "SomeModule";
0
Bogdan Surai