おそらくtsconfig.jsonファイルに"allowSyntheticDefaultImports": true,が設定されており、実際にはコンパイラが無効とみなしたデフォルトのインポートをサイレントにします。 Typescript はesModuleInteropを追加します。これはモジュールの読み込みに関して babel が行うことと基本的に同じです。

これにより、インポートされたソース コードにデフォルトのエクスポートがない場合に、ES6 のデフォルトのインポートを使用できるようになります。

Typescript はこの点に関して厳密 (ルールに従って) であるため、import * as React from 'react'を使用する必要があります。または、基本構成で合成デフォルトのインポートを許可するように指示する必要があります。

その他の関連情報

TL;DR

実際には、ES インポート ステートメントimport defaultとimport **は同じものではありませんが、この場合、React 作成者がこの方法を選択したため、これらは同じように動作します。ライブラリを公開し、TypeScript の互換性レイヤー (esModuleInteropを使用) または Babel とパッケージ化ツールを使用して「正常に機能する」ようにします。 ES6 の仕様によれば、おそらく適切に動作しないはずですが、現在でも JS モジュールが混沌とした時代にあるため、Babel、TypeScript、Webpack などのツールはすべて動作を標準化しようとしています。

詳細:

React は ES6 ライブラリではありません。ソース コードを見ると、index.jsに次のことがわかります:

リーリー

(コメントに注意してください。React ソース コードでも、ES6 のデフォルト エクスポートとの互換性の問題に取り組んでいます。)

module.exports =構文は CommonJS (NodeJS) の構文です。ブラウザはこの構文を理解できません。そのため、Webpack、Rollup、Parcel などのパッケージ化ツールを使用します。これらはさまざまなモジュール構文を理解し、ブラウザで動作するバンドル ファイルを生成します。

ただし、React は ES ライブラリではありませんが、TypeScript と Babel の両方で ES ライブラリのようにインポートできます (require()ではなくimport構文を使用し、など)、ただし、CJS と ES の間には、対処する必要があるいくつかの違いがあります。その 1 つは、export =が、関数やクラスをモジュールとしてインポートするなど、ES 仕様に準拠していないインポート メソッドを提供する可能性があることです。これらの非互換性を解決するために、Babel ではデフォルトまたは名前空間ごとに CJS モジュールをインポートできます。 TypeScript は以前はこれをサポートしていませんでしたが、このオプションは最近esModuleInteropに追加されました。そのため、Babel と TypeScript の両方で、デフォルトまたは名前空間 ES インポートを使用して CJS モジュールをインポートできるようになりました。

TypeScript の場合、ライブラリの型定義の定義方法にも依存します。詳細については説明しませんが、トランスパイラーとパッケージ化ツールのおかげで、特定のインポートが実行時には正常に機能しても、TypeScript がコンパイル時にエラーをスローする場合があることは想像できます。

もう 1 つ言及する価値があるのは、React のビルド コードを見ると、CJS バージョンだけでなくUMD モジュールバージョンも存在するということです。 UMD バージョンには、ブラウザを含むあらゆるモジュール環境で適切に動作するための複雑なランタイム コードが含まれています。これは主に、React のみがランタイムに含まれている場合 (つまり、パッケージ化ツールが使用されていない場合) に使用することを目的としています。 ＃＃＃例＃＃＃。わかりにくいですか?はい、私もそう思います。 :)