☰

TypeScript エクスポートとデフォルトエクスポート 質問する

tag-icon • tag-icon javascript typescript ecmascript-6
TypeScript エクスポートとデフォルトエクスポート 質問する

exportTypeScript におけるとの違いは何ですかdefault export?

すべてのチュートリアルで、exportクラスを ing している人がいるのですが、エクスポートする前にキーワードを追加しないとコードをコンパイルできませんdefault。

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

export class MyClass {

  collection = [1,2,3];

}

コンパイルされません。ただし:

export default class MyClass {

  collection = [1,2,3];

}

はい。

エラーは次のとおりです:

エラー TS1192: モジュール '"src/app/MyClass"' にはデフォルトのエクスポートがありません。

ベストアンサー1

デフォルトのエクスポート ( 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

おすすめ記事