[解決済み] Typescriptエクスポートとデフォルトエクスポートの比較

質問

Typescriptでは export と default export . すべてのチュートリアルで、私は人々が export を追加しないと、自分のコードをコンパイルすることができません。 default というキーワードをエクスポートする前に入力します。

また、デフォルトのエクスポートキーワードの痕跡は公式には見つかりませんでした。 タイプスクリプトドキュメント .

export class MyClass {

  collection = [1,2,3];

}

コンパイルされません。しかし

export default class MyClass {

  collection = [1,2,3];

}

する。

というエラーが発生します。 error TS1192: Module '"src/app/MyClass"' has no default export.

解決方法は？

デフォルトのエクスポート ( export default )

// MyClass.ts -- using default export
export default class MyClass { /* ... */ }

主な違いは、1つのファイルにつきデフォルトのエクスポートは1つだけで、それをこのようにインポートすることです。

import MyClass from "./MyClass";

好きな名前をつけることができます。例えば、こんな感じで大丈夫です。

import MyClassAlias from "./MyClass";

名前付きエクスポート ( export )

// MyClass.ts -- using named exports
export class MyClass { /* ... */ }
export class MyOtherClass { /* ... */ }

名前付きエクスポートを使用する場合、1つのファイルに複数のエクスポートを持つことができ、中括弧で囲まれたエクスポートをインポートする必要があります。

import { MyClass } from "./MyClass";

注：中括弧を追加すると、ご質問にあるエラーが修正されます。中括弧で指定された名前は、エクスポートの名前と一致する必要があります。

あるいは、あなたのファイルのエクスポートは 複数 クラスの両方をインポートすることができます。

import { MyClass, MyOtherClass } from "./MyClass";
// use MyClass and MyOtherClass

あるいは、このファイルの中でどちらかに別の名前をつけることもできます。

import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass";
// use MyClass and MyOtherClassAlias

あるいは、エクスポートされたものをすべてインポートするために * as :

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass and MyClasses.MyOtherClass here

どれを使うか？

ES6 では、デフォルトのエクスポートは簡潔である。 の方がより一般的な使用例です。 しかし、私がTypeScriptでプロジェクト内部のコードを作っているときは、ほぼ毎回、デフォルトエクスポートではなく名前付きエクスポートを使うことを好んでいます。例えば、クラスをデフォルトでエクスポートして、そのクラスの名前を変更した場合、そのファイル内のクラス名だけが変更され、他のファイル内の他の参照は変更されない。名前付きエクスポートを使用すると、そのクラスと、他のすべてのファイルにおけるそのクラスへのすべての参照の名前が変更されます。

また バレルファイル (名前空間のエクスポートを使用するファイル) export * -を他のファイルにエクスポートします)。この例は、"example" のセクションで示されています。 この回答 .

なお、エクスポートが1つしかない場合でも名前付きエクスポートを使うという私の意見は TypeScriptハンドブック -レッドフラッグの項を参照してください。この推奨は、他の人が使うAPIを作成していて、そのコードが自分のプロジェクトの内部で使われていない場合にのみ適用されると私は考えています。私が他の人が使うAPIを設計しているときは、デフォルトのエクスポートを使うことにして、他の人ができるようにします。 import myLibraryDefaultExport from "my-library-name"; . もし、こうすることに反対なら、ぜひその理由を聞かせてください。

とはいえ、自分の好みのものを見つけてください 片方、もう片方、あるいは両方を同時に使うこともできます。

追加ポイント

デフォルトのエクスポートは、実際には default そのため、もしファイルにデフォルトのエクスポートがあれば、インポートすることもできます。

import { default as MyClass } from "./MyClass";

そして、以下のことに注意してください。 その他の方法 が存在します。 

import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile";
import MyDefaultExportedClass, * as Classes from "./SomeFile";
import "./SomeFile"; // runs SomeFile.js without importing any exports