--isolatedModulesエラーがインポートによって修正されるのはなぜですか？

Question 1

create-react-app typescriptプロジェクトでは、いくつかのものをすばやくテストするために、これを書き込もうとしました。

// experiment.test.ts
it('experiment', () => {
  console.log('test');
});

しかし、それは私に次のエラーを与え、その下に赤い波線がありますit：

'--isolatedModules'フラグが指定されている場合、すべてのファイルはモジュールである必要があります。

ただし、ファイルを次のように変更すると、すべてが明らかに問題ありません（もちろん未使用のインポートを除く）。

// experiment.test.ts
import { Component} from 'react'; // literally anything, don't even have to use it

it('test', () => {
  console.log('test');
});

どうして？ここで何が起きてるの？何をするん--isolatedModules実際に行う/意味ですか？

Question 2

Typescriptは、インポート/エクスポートのないファイルをレガシースクリプトファイルとして扱います。このようなファイルはモジュールや定義ではないため、グローバル名前空間にマージされています。isolatedModulesそのようなファイルを禁止します。

ファイルにインポートまたはエクスポートを追加すると、ファイルがモジュールになり、エラーが表示されなくなります。

またexport {}、何もインポートせずにファイルをモジュールにする便利な方法です。

Question 3

正しい方法は、TypeScriptに必要なものを伝えることです。ディレクトリ内にisolatedModules作成しtsconfig.jsonてtest追加したくない場合：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false
  },
}

"isolatedModules": true設定に追加してから、空のexport {}匂いを追加してTypeScriptチェッカーをだますのは悪いコードです。

Question 4

分離されたモジュールをチェックしてみましょう。私がグーグルをチェックしたとき、それの直接の文脈はありません。

これは基本的に、Typescriptがモジュールを分離してコンパイルできるようにすることを意味します。

しかし、それはTypescriptから来ており、名前空間よりもモジュールを優先するTypescriptと関係があります。

モジュールは、モジュールローダー（CommonJs / Require.jsなど）またはESモジュールをサポートするランタイムにも依存します。モジュールは、コードの再利用、分離の強化、およびバンドルのツールサポートの向上を提供します。

ソース1

create-react-app typescriptプロジェクトを使用して、typescriptとts-jestをインストールしておく必要があります（または、create-react-appは、アプリをイジェクトしたかどうかに基づいて依存関係を処理する必要があります）。

また、ts-jestそれについていくつかの情報を持っています：

デフォルトでは、ts-jestはプロジェクト（あなたの）のコンテキストでTypeScriptコンパイラを使用し、完全な型チェックと機能を備えています。ただし、TypeScriptが「分離モジュール」と呼ぶ各ファイルを個別にコンパイルするためにも使用できます。これが、isolatedModulesオプション（デフォルトはfalse）が行うことです。

ソース2

exportコマンドを使用するとすぐに、エクスポートされているものからモジュールが作成されます。

ts-jestを使用している場合は、create-react-appで構成される他のモジュールに影響を与えることなく、これらの設定を追加できます。

"ts-jest": {
  "isolatedModules": false
}

そして、賛否両論のts-jestページ（セカンドソース）をチェックアウトしてください。