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

JavaScript

環境

  • 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 があったにせよ) 表題について理解していればすぐに気付けた

ドキュメント

メモ : 名前付きエスクポート 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 が返る

せっかくなので

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> { //こう書くハズ
}