JavaScript(ES2015) の export 方法は「名前付きエクスポート」 と 「デフォルトエクスポート」 の 2 種類あり、import する際の名前の付け方が異なる

環境

• ES2015
• typescript 2.9.2
• react-native 0.57.8

JavaScript のモジュール機能(import/export)についてメモ

• 調べたきっかけ
  • サードパーティー製の ReactNative のライブラリを利用した際
    • デフォルトエクスポート(export default)されたメンバを import {メンバ名} してしまい
    • TypeError: Cannot read property 'hoge' of undefined のようなエラーになった
  • (ライブラリのマニュアルに typo があったにせよ) 表題について理解していればすぐに気付けた

ドキュメント

• MDN - export

  • エクスポート方法は、名前付き と デフォルトの 2 種類

• MDN - import

メモ : 名前付きエスクポート vs デフォルトエクスポート

• エクスポート方法は 名前付きエクスポート と デフォルトエクスポート の 2 種類ある

  • export //名前付きエクスポート
  • export default //デフォルトエクスポート

• インポートの際、名前の付け方が異なる

• 名前つきエクスポート

  • import {エクスポートしたメンバ名} from 'モジュールファイル名';
    • エクスポートしたメンバ名をそのまま使う
    • メンバ名を波括弧で括る
  • ※別の名前でつかう場合は as を使う
    • import {エクスポートしたメンバ名} as 別の名前 from 'モジュールファイル名';

• デフォルトエクスポート

  • import 好きな名前 from 'モジュールファイル名';
    • 名前を自由に指定できる
    • メンバ名を波括弧で括らない
  • ※デフォルトエクスポートできるメンバは、モジュール 1 つに対して 1 つに限る

サンプル

• デフォルトエクスポート したメンバを import {メンバ名} してしまうと undefined になる

// モジュールファイル test.js

export default class Test { //デフォルトエクスポート
  static hoge = () => {console.log('test')}
}

import Test from "test";

console.log(typeof Test); //function ※1
Test.hoge(); // test

import Hoge from "test"; //デフォルトエクスポートされたメンバは、名前を自由に指定できる

Hoge.hoge(); // test

import {Test} from "test"; //デフォルトエクスポートされたメンバを {} で括ってはダメ

console.log(typeof Test); //undefined
Test.hoge(); //エラー TypeError: Cannot read property 'hoge' of undefined

• ※1
  • Class を typeof すると function が返る
    • typeof - 例

せっかくなので

import * as React from 'react'; を少し貼り下げて理解してみた

`import * as React from 'react';` //すべてのモジュールをまとめてインポート

↓
class App extends React.Component<Props, State> {
}

`import React, {Componet} from 'react';` //* を使わなかった場合

↓
class App extends Component<Props, State> { //こう書くハズ
}

• 似たような話が stackoverflow にあった
  • Difference between import React and import { Component } syntax