Definitelytyped: ES6のインポートの問題に対応

export default react = React;はうまくいくかもしれません

私はあなたが欲しいのはimport * as React, {Component} from 'react';だと思います（しかし私は間違っているかもしれません、それでもこれのいくつかを学んでいます：smiley :)

そのため、最近ES6でかなりの時間を過ごしましたが、ReactはES6クラスモジュールを使用しないため、デフォルトのエクスポートを指定できないため、現在import React from 'react';は技術的に有効な動作ではないと思います。

この構文はBabelを使用する場合に機能しますが、これは基本的にBabelが「ES6インポートを使用してCommonJSモジュールを取得する場合、デフォルトのエクスポートはmodules.exportと同じです。ただし、これは完全にBabelのものであり仕様ではありません。仕様の観点からすると、 import * as React from 'react';は実際には精神的にはるかに近いと言えます（そして、TypeScriptですぐに使用できます）。

ただし、これは完全にBabelのものであり、仕様のものではありません

同意しました。 しかし、babelには多くの牽引力があり、人々はES6モジュールが動作する正しい方法であると信じています。

@vvakameは、babelタイプのインポートとの相互運用をよりスムーズにするためにいくつかの作業を行いました： https ：//github.com/Microsoft/TypeScript/pull/3586

そうです、PRは主にTypeScriptからのエクスポートに関するものですが、この問題はTypeScriptへのインポートに関するものです。 言い換えれば、そのPRはこの問題の助けにはなりません（ただし、TypeScriptを使用してライブラリを構築するのには間違いなく適しています！）。

BabelがFacebookに買収されたので、この問題はすぐになくなると思います。ReactがES6モジュールとして書き直されても、まったく驚かないでしょう。

または、その構文を_本当に_使用したい場合は、宣言ファイルをexport default Reactに変更できますが、ES6をターゲットにしてから、Babelを使用してCommonJSにトランスパイルする必要があります。そうしないと、実行時に正しく機能しません（TypeScriptはES6インポートを使用する場合は、常にmoduleName.defaultにトランスパイルします）。

明確にしていただきありがとうございます。 つまり、 ts export -> babel importが機能しています。 ここで、 module.exports aliased to default -> ts importが機能する必要があります。

私はパーティーに少し遅れていますが、私が知っていることから、これはTypeScriptチームからの修正ではありません。

tl; dr： export defaultをmodule.exports =に変換することはできません。 代わりにimport ... = require(...)レガシー構文を使用してください:(

ES-6のデフォルトのエクスポートは、基本的に「default」という名前の通常のエクスポートであるため、CJSでの同等のエクスポートはexports.default =になります。 CJS var something = require('something').defaultでのインポートは次のようになります。 module.exports =構文では、モジュールがエクスポートされたシンボル自体と等しくなり、循環依存関係を解決できなくなるため、十分ではありません。 これは、ES6モジュールの設計に反します。 私見バベルチームはこれで少し船外に出ました:(

@dreampulse私はこのシンダックスを使ってやっています：

import {default as React,Component} from 'react';

残念ながら私にはうまくいかない@kataras ：

Error:(2, 9) TS2305: Module '"react"' has no exported member 'default'.

コード

import {default as React, Component, PropTypes} from 'react';

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "jsx": "react"
  }
}

動作しているのは、2つのインポートがあることです。 お気に入り：

import * as React from "react";
import { Component } from "react";

この種のインポートを可能にするallowSyntheticDefaultImportsコンパイラオプションを使用できます。

import React, {Component} from 'react';

@jbrantlyに感謝します。 スポットオン!!

@ligazありがとう！

参考までに、 @ ligazが言及した修正が機能する前に、 "module": "es2015",をtsconfig.jsonに追加する必要がありました。

import React, {Component, PropTypes} from 'react';を使用していますが、エラーCannot resolve symbol PropTypesが発生します。 この問題を解決する方法についてのポインタはありますか？

@kkarmalkar React> = 15.5.0を使用している場合は、React.PropTypesから新しいprop-typesパッケージと定義に移行する必要があります。

素晴らしい、ありがとう@corydeppen

allowSyntheticDefaultImportsを持っていても、取得できません

import React, {Component} from 'react';

動作するが、使用する

import React from 'react';
import {Component} from 'react';

正常に動作します。 モジュールをes5に設定しています。 ブラウザ用のコードをコンパイルするとき、es6を使用することをお勧めしますか？ tsconfig.jsonのlibsプロパティにes2015を追加しました。

@richteraおそらく関連していますか？： https ：//github.com/Microsoft/TypeScript/issues/21621

はい、関連しています。 このスレッドによると、それはあなたのために働いているのですが、不思議です。

tsconfigオプションesModuleInterop: trueを追加するだけで、デフォルトのインポート、つまりimport React from 'react'を使用できます。

webpackを使用している場合は、この設定でbabelを捨てることもできます。

これは現在機能しています。 当時使っていたwebpackとtypescriptの特定のバージョンに関連していると思います。 残念ながら、javascript以外でbabelを使用するには、Babelのセットアップが必要です。

"allowSyntheticDefaultImports"：true

"module": "es2015
“allowSyntheticDefaultImports”：true

働く ....

"module": "es2015
“allowSyntheticDefaultImports”：true

働く ....

これはトロールですか？ :)最後の行に方向性のある引用符があり、 trueの前のコロンではありません。 次のようになります。

  "module": "es2015",
  "allowSyntheticDefaultImports": true

import {default as ProjectInfoProfile} from'./ProjectInfoProfile';
また
'./ProjectInfoProfile'からProjectInfoProfileをインポートします。

この場合、動作する可能性があります。

"モジュール"： "commonjs"、
"ターゲット"： "es6"、
"esModuleInterop"：true、
"jsx"： "react"、
"allowSyntheticDefaultImports"：true