明らかなようですが、私はES6で単一のモジュールをインポートするために中括弧を使用する場合について少し混乱していました。たとえば、私が取り組んでいるReact-Nativeプロジェクトには、次のファイルとその内容があります。
var initialState = {
todo: {
todos: [
{id: 1, task: 'Finish Coding', completed: false},
{id: 2, task: 'Do Laundry', completed: false},
{id: 2, task: 'Shopping Groceries', completed: false},
]
}
};
export default initialState;
TodoReducer.jsでは、中括弧なしでインポートする必要があります。
import initialState from './todoInitialState';
initialState
を中括弧で囲むと、次のコード行で次のエラーが発生します。
未定義のプロパティの仕事を読み取れません
export default function todos(state = initialState.todo, action) {
// ...
}
同様のエラーは中括弧のついた私のコンポーネントにも起こります。私が知っているように、複数のコンポーネント/モジュールをインポートするとき、明らかにそれらを中括弧で囲まなければならないので、単一のインポートのために中括弧を使うべきかどうか疑問に思いました。
編集する
here のSO投稿は私の質問に答えませんが、代わりにwhenを要求しています。 single のインポートには中括弧を使用する必要があります。または、ES6で単一のモジュールをインポートするために中括弧を使用してはいけません(中括弧が必要な単一インポートを見たので、これは明らかに当てはまりません)。
これはデフォルトのインポートです。
// B.js
import A from './A'
A
がデフォルトのエクスポートを持っている場合にのみ機能します。
// A.js
export default 42
この場合、インポート時にどの名前を付けてもかまいません。
// B.js
import A from './A'
import MyA from './A'
import Something from './A'
なぜならそれはA
のdefault exportがどんなものでも解決するからです。
これは名前付きインポートはA
です。
import { A } from './A'
A
が名前付きエクスポートはA
を含む場合にのみ機能します。
export const A = 42
この場合、エクスポート名による特定のものをインポートしているため、名前が重要になります。
// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!
これらを機能させるには、A
に対応する名前付きエクスポートを追加します。
// A.js
export const A = 42
export const myA = 43
export const Something = 44
モジュールは1つのデフォルトのエクスポートしか持てませんが、あなたが望むのと同じだけ多くの名前付きエクスポート _(0、1、2、または多く)それらをまとめてインポートすることができます。
// B.js
import A, { myA, Something } from './A'
ここでは、デフォルトのエクスポートをA
としてインポートし、exportsという名前をそれぞれmyA
およびSomething
とします。
// A.js
export default 42
export const myA = 43
export const Something = 44
インポート時に、それらすべてに異なる名前を割り当てることもできます。
// B.js
import X, { myA as myX, Something as XSomething } from './A'
デフォルトのエクスポートは、通常モジュールから取得することを期待しているものすべてに使用される傾向があります。名前付きエクスポートは、便利なユーティリティに使用される傾向がありますが、必ずしも必要というわけではありません。ただし、エクスポート方法を選択するのはあなた次第です。たとえば、モジュールにはデフォルトのエクスポートがまったくない場合があります。
TL; DR :デフォルト以外のエクスポートをインポートする場合は、中括弧が使用されます。
詳細については上記のDan Abramovsの回答を参照してください。
上記のDan Abramovの回答は、 デフォルトのエクスポート および の名前付きエクスポート について説明したものです。
どちらを使う?
引用符David Herman :ECMAScript 6は単一/デフォルトのエクスポートスタイルを好み、デフォルトのインポートに最も適した構文を提供します。名前付きエクスポートのインポートは、やや簡潔でない可能性があります。
しかしTypeScriptではexportという名前がリファクタリングのために好まれています。たとえば、デフォルトでクラスをエクスポートして名前を変更した場合、クラス名はそのファイル内でのみ変更され、他の参照では変更されません。名前付きエクスポートクラス名はすべての参照で名前変更されます。 指定輸出は公益事業者にも好まれます。
あなたが好むものは何でも使用してください。
追加
デフォルトのエクスポートは実際にはdefaultという名前の名前付きエクスポートなので、デフォルトのエクスポートは次のようにインポートできます。
import {default as Sample} from '../Sample.js';
あなたがimport
を単なるノードモジュール、オブジェクト、そして分解のためのシンタックスシュガーと考えるならば、私はそれがかなり直感的であると思います。
// bar.js
module = {};
module.exports = {
functionA: () => {},
functionB: ()=> {}
};
// really all that is is this:
var module = {
exports: {
functionA, functionB
}
};
// then, over in foo.js
// the whole exported object:
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props
// just one prop of the object
var fump = require('./bar.js').functionA;
// same as this, right?
var fump = { functionA, functionB }.functionA;
// and if we use es6 destructuring:
var { functionA } = { functionA, functionB };
// we get same result
// so, in import syntax:
import { functionA } from './bar';
通常、関数をエクスポートするときは{}を使う必要があります。
if you have export const x
あなたは import {x} from ''
を使います
if you use export default const x
あなたはimport X from ''
を使う必要があります
import
ステートメントで中括弧を使用することを理解するには、まず、ES6で導入されたdestructingの概念を理解する必要があります
オブジェクト破壊
var bodyBuilder = {
firstname: 'Kai',
lastname: 'Greene',
nickname: 'The Predator'
};
var {firstname, lastname} = bodyBuilder;
console.log(firstname, lastname); //Kai Greene
firstname = 'Morgan';
lastname = 'Aste';
console.log(firstname, lastname); // Morgan Aste
配列分割
var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame); // Gran Turismo
リストマッチングを使う
var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(secondGame); // Burnout
スプレッド演算子を使用する
var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame);// Gran Turismo
console.log(rest);// ['Burnout', 'GTA'];
ES6では、複数のモジュールをエクスポートできます。次に、以下のようにオブジェクトのデストラクタリングを利用できます。
module.js
というモジュールがあるとしましょう。
export const printFirstname(firstname) => console.log(firstname);
export const printLastname(lastname) => console.log(lastname);
エクスポートした関数をindex.js
にインポートします。
import {printFirstname, printLastname} from './module.js'
printFirstname('Taylor');
printLastname('Swift');
また、そのように異なる変数名を使用することもできます。
import {printFirstname as pFname, printLastname as pLname} from './module.js'
pFname('Taylor');
pLanme('Swift');
中括弧({})は名前付きバインディングをインポートするために使用され、その背後にある概念は代入代入です
Import文が例でどのように機能するかの簡単なデモンストレーションは、 JavaScriptインポートで '{}'を使用するのはいつですか? の同様の質問に対する私自身の回答にあります。
ES6
モジュール:輸出:
2種類のエクスポートがあります。
構文:
// Module A
export const importantData_1 = 1;
export const importantData_1 = 2;
export default function foo () {}
輸入:
エクスポートの種類(名前付きエクスポートまたはデフォルトエクスポート)は、インポート方法に影響します。
構文:
// Module B, imports from module A which is located in the same directory
import { importantData_1 , importantData_2 } from './A'; // for our named imports
// syntax single named import:
// import { importantData_1 }
// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';
興味のあるもの:
名前付きインポートの名前を変更したい時はいつでもaliasesを通して可能です。このための構文は次のとおりです。
import { importantData_1 as myData } from './A';
importantData_1
をインポートしましたが、識別子はimportantData_1
ではなくmyData
です。