web-dev-qa-db-ja.com

タイプスクリプトのエクスポートとデフォルトのエクスポート

TypeScriptのexportとdefault exportの違いは何ですか。すべてのチュートリアルで、私は人々が彼らのクラスをexportしているのを見ています、そしてエクスポートする前にdefaultキーワードを追加しなければコードをコンパイルできません。

また、公式の TypeScriptのドキュメント には、デフォルトのexportキーワードの痕跡は見つかりませんでした。

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.

typescriptecmascript-6
202
fos.alex

デフォルトのエクスポート（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 *）でも非常にうまく機能します。この例は この答え の "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
374
David Sherret

私は同じ問題を解決しようとしていましたが、 Basarat ALi Syed 、ofTypeScript Deep Dive名声、クラスの一般的なexport default宣言を避け、代わりにexportタグをクラス宣言に追加する必要があること。インポートされたクラスは、代わりにモジュールのimportコマンドにリストされる必要があります。

それは：の代わりに

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

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

export class Foo {
    // ...
}

インポーターのimport {Foo} from './foo'。

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

4
Hilton Fernandes

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

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) );
0
Nikola Lukic