1. ホーム
  2. javascript

commonjs / amd モジュールをインポートするための新しい es6 構文(例:`import foo = require('foo')` )...

2023-11-20 02:50:37

質問

以前はできたのですが。

import foo = require('foo');

しかし、TypeScript (1.5) が es6 モジュール構文をサポートした今、ES6モジュール構文で同じことを実現する正しい方法は何でしょう。

どのように解決するのですか?

正しい方法は、古いインポート構文を使い続けることです。新しいインポート構文は ES モジュール専用で、古いインポート構文は ES6 以前のモジュール用です。この 2 つは意図的に区別されています。 import * as foo from 'foo' はすべての プロパティ モジュール 'foo' の としてデフォルト値をインポートしません。 foo .

機能の設計者から :

  • エクスポート・デフォルト宣言は常にdefaultという名前のエクスポートされたメンバーを宣言し、常にexports.defaultへの代入として発行されます。言い換えれば export default は一貫して ES モジュールのセマンティクスを持っています。Babel との互換性のために、私たちはオプションで __esModule マーカーを出すことができますが、実際にはそのマーカーは何のためにも使用しません。
  • export = 宣言は、モジュール自身の代わりにエクスポートされる別の実体を代入するもので、 常に module.exports . を使用するモジュールで他のエクスポートがあるのはエラーです。 export = . これは既存のTypeScriptの動作です。
  • を使用するモジュールは export = を使って別のモジュールをエクスポートしているモジュールは、新しい ES6 構造体を使用してインポートすることができます。特に、便利なデストラクチャリングインポートは、そのようなモジュールで使用することができます。を使用するパターンは export = を使用して別のモジュールをエクスポートするパターンは、内部モジュールのCommonJS/AMDビューを提供する.d.tsファイル(例:angular.d.ts)で一般的です。
  • を使用するモジュールは export = を使ってモジュール以外のエンティティをエクスポートしているモジュールは、既存の import x = require("foo") 構文を使ってインポートしなければなりません。

2016年更新です。 TypeScriptコンパイラは、ある時点から import * as foo from 'legacy-module-foo' を特定の状況下でレガシーモジュールのデフォルトインポートを取得するようになりました。 これはES6仕様に違反するものである ( §15.2.1.16 , "値 "*"は、インポート要求がターゲットモジュールの 名前空間オブジェクト ." ).

この方法でインポートしたレガシーモジュールがES6モジュールに更新されると、それらのモジュールの「デフォルト」インポートは動作しなくなります(なぜなら * as foo のインポートは のはずです。 をインポートしているはずです。 名前空間オブジェクト をインポートすることになる)、これを行うことがTypeScript/SystemJSのハックであることを知らないと、非常に混乱するかもしれない。また、将来のTypeScriptのES仕様への再調整で、それらが壊れる可能性もあります。

そのため、ES6の名前空間インポートがどのように機能するかについて、あなた自身やあなたのコードで働く他の開発者を混乱させないため、そして混乱を招くような変更を避けるために、おそらくレガシーモジュールをロードするために、上記のレガシーインポート構文を使い続けることが望ましいと思われます。