Typescriptエクスポートとデフォルトエクスポート

間の活字体の違いは何であるexportとはdefault export。すべてのチュートリアルで、人々exportがクラスを使用していることを確認していますdefault。エクスポートする前にキーワードを追加しないと、コードをコンパイルできません。

また、公式のtypescriptドキュメントでデフォルトのエクスポートキーワードの痕跡を見つけることができませんでした。

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つのデフォルトのエクスポートしか持てず、次のようにインポートすることです。

import MyClass from "./MyClass";

好きな名前を付けることができます。たとえば、これは正常に動作します：

import MyClassAlias from "./MyClass";

名前付きエクスポート（export）

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

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

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 *他のファイルをエクスポートするためにネームスペースエクスポートを使用するファイル）と非常にうまく連携します。この例は、この回答の「例」セクションに示されています。

エクスポートが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

私は同じ問題を解決しようとしていましたが、TypeScript Deep Diveの名声であるBasarat Ali Syedによる興味深いアドバイスを見つけました。クラスのジェネリック宣言を回避し、代わりにクラス宣言にタグを追加するべきです。インポートされたクラスは、代わりにモジュールのコマンドにリストされます。export defaultexportimport

つまり：の代わりに

class Foo {
    // ...
}
export default Foo;

import Foo from './foo';インポートするモジュールのシンプルなものを使用する必要があります

export class Foo {
    // ...
}

そしてimport {Foo} from './foo'インポーターで。

その理由は、クラスのリファクタリングとエクスポートのための追加作業が難しいためです。バサラトによる元の投稿はexport default問題を引き起こす可能性があります

これは、単純なオブジェクトのエクスポートの例です。

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

メインファイル（新しいインスタンスを作成する必要がなく、作成する必要がない場合に使用）で、グローバルではないため、必要な場合にのみこれをインポートします。

import MyScreen from "./module/screen";
console.log( MyScreen.width(100) );