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

Question

exportとdefault exportの間のTypescriptの違いは何ですか？すべてのチュートリアルでは、exportというクラスがあり、エクスポートする前にdefaultキーワードを追加しないとコードをコンパイルできません。

また、公式typescript documentationにデフォルトのエクスポートキーワードのトレースが見つかりませんでした。

export class MyClass { 

    collection = [1,2,3]; 

} 

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

export default class MyClass { 

    collection = [1,2,3]; 

} 

です。主な違いは、あなただけのファイルごとに1つのデフォルトのエクスポートを持つことができるということですerror TS1192: Module '"src/app/MyClass"' has no default export.

Answer 1

デフォルトのエクスポート（export default）

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

、あなたはそうのようにそれをインポートします：

誤差がある

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では、デフォルトのエクスポートは簡略化されているので、their use case is more common;しかし、TypeScriptのプロジェクトのコード内部で作業しているときは、コードのリファクタリングでうまく動作するため、デフォルトの書き出しの代わりに名前付きの書き出しを使用する方がほとんどいつも好きです。たとえば、デフォルトでクラスをエクスポートしてそのクラスの名前を変更すると、そのファイル内のクラスの名前が変更され、他のファイル内の他の参照の名前は変更されません。名前付きエクスポートでは、他のすべてのファイルでクラスの名前とそのクラスへのすべての参照がリネームされます。

barrel files（他のファイルをエクスポートするために名前空間のエクスポート-を使用するファイル）でもうまくいきます。この例は、this answerの「例」セクションに示されています。

輸出が1つしかない場合でも、名前付き輸出品を使用するとの私の意見は、TypeScript Handbookに反することに注意してください。「レッドフラグ」セクションを参照してください。この勧告は、他のユーザーが使用するためのAPIを作成していて、コードがプロジェクトの内部にない場合にのみ適用されると考えています。人々が使用できるようにAPIを設計する際には、デフォルトのエクスポートを使用して、人々がimport myLibraryDefaultExport from "my-library-name";を実行できるようにします。あなたがこのことについて私に同意しない場合、私はあなたの推論を聞くのが大好きです。あなたが好むものを見つける、と述べ

！あなたは、一方、他方、または両方を同時に使うことができます。

見所

ファイルは、デフォルトのエクスポートを持っているならば、あなたも実行してインポートすることができますので、デフォルトのエクスポートは、実際に名前defaultを持つという名前の輸出です：

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

をと取りますこれらother waysが存在をインポートするために注意してください。 

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

Answer 2

ここでは単純なオブジェクトのエクスポートを使用した例を示します。

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));