Typescript＋Reactでimport React from "react"というコードが書かれていない理由。

Question

疑問点

ReactとReduxの勉強を初めて少したち、TypeScriptも導入して行きたいと考えています。
そこでTypeScriptで書かれたReactアプリのコードをみたところ以下のような記述をみました。

React+TypeScriptのコード

import * as React from "react"
import * as ReactDOM from "react-dom"

疑問点

今まで書いてきたコードは

import React from "react"

のようにそのままReactをimportしていたので、不思議に思いました。
この書き方はTypeScript固有のものなのでしょうか？

よろしくお願いします。

Answer 1

それは、ワイルドカードを使ったimportで、文法として JavaScript に存在するものです。

質問者さんが今まで書いてきた以下のコードは、デフォルトエクスポートされたクラス(または関数)のみをインポートし、それに対してReactという名前を割り当てます。

import React from "react";

対して、ワイルドカードを使った場合、指定したモジュール内のすべてのエクスポートされたクラス(または関数)をインポートし、それに対してReactという名前を割り当てます。

import * as React from "react";

---

例えば、exportA.js, importA.js 2 つのファイルがあるとして、exportA.jsの内容を以下のようにします。

export function foo() {
  return 'foo';
}

export default function bar() {
  return 'bar';
}

このとき、importA.jsの内容を以下のようにすると、bar関数だけがインポートされます。

import defaultExportA from './exportA.js';

console.log(defaultExportA); // function bar()

次に、importA.jsの内容を以下のようにすると、bar関数だけでなく、foo関数もインポートされます。

import * as defaultExportA from './exportA.js';

console.log(defaultExportA); // Object { default: bar(), foo: foo(), … }

Comments

[moeka802]

同じimportを使ったコードでも対象が異なっているのですね。
迅速な回答ありがとうございました! ∪･ω･∪