Warum wird der Fehler --isolatedModules durch einen Import behoben?

130

In einem Typoskript-Projekt zum Erstellen und Reagieren von Apps habe ich versucht, dies zu schreiben, um einige Dinge schnell zu testen:

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

Aber es gibt mir den folgenden Fehler, mit einem roten Schnörkel darunter it:

Alle Dateien müssen Module sein, wenn das Flag '--isolatedModules' angegeben ist.

Wenn ich jedoch die Datei wie folgt ändere, ist anscheinend alles in Ordnung (außer natürlich dem nicht verwendeten Import):

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

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

Why? What is happening here? What does --isolatedModules actually mean/do?

typescript

— Svish
quelle

If you're using import or export then that file is an ES6 module. Your top example is problematic because it is not defined anywhere, in a modular architecture you'd need to import it from somewhere

— apokryfos

Antworten:

245

Typescript treats files without import/exports as legacy script files. As such files are not modules and any definitions they have get merged in the global namespace. isolatedModules forbids such files.

Adding any import or export to a file makes it a module and the error disappears.

Also export {} is a handy way to make a file a module without importing anything.

— Titian Cernicova-Dragomir
quelle

Thank you, so easy, but when you create your first test you get puzzled with the error.

— Juangui Jordán

@JuanguiJordán so easy so wrong. If you don't want isolatedModules just set them to false.

— Wojciech Bednarski

Thanks @WojciechBednarski but can you elaborate a bit on your answer?

— Juangui Jordán

@JuanguiJordán Well, it is like adding some rule and then ignoring it by adding @ts-ignore. The export {} is just a different syntax, way of bypassing the rule, but in principle is exactly that.

— Wojciech Bednarski

I don't see an issue with having general rules that are followed 99% of the time, but that sometimes needs to be broken. Having to "break a rule", as long as the rule generally is a good one, it forces me to think about what I'm doing and consider if there are better ways to solve something. And sometimes there isn't. Like in this case, where I was just making a test-file to try something out.

— Svish

The correct way is to tell TypeScript what you want. If you don't want isolatedModules create tsconfig.json inside your test directory and add:

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

Adding "isolatedModules": true to the config and then cheating TypeScript checker by adding empty export {} smells bad code to me.

— Wojciech Bednarski
quelle

as explained in other comments, in this particular case, it won't be counted as code smell, it's a necessity over here, since there is no other way to partially exclude some file from the isolutedModules rule

— Akshay Vijay Jain

Hmm, when I frob true to false, I am told in reply: TypeError: Cannot assign to read only property 'isolatedModules' of object '# <Object>' at verifyTypeScriptSetup

— Jerry Asher

@JerryAsher same here man, but it worked earlier and then I reverted some code and tried to run it, which is when I got the exact same error.

— Ganesh Kumar

Let's try to check isolated modules. When I checked Google, there is no direct context of it.

It basically means that you allow Typescript to compile modules in isolation.

But it comes from Typescript and has something to do with Typescript preferring modules over namespaces.

Modules also have a dependency on a module loader (such as CommonJs/Require.js) or a runtime which supports ES Modules. Modules provide for better code reuse, stronger isolation and better tooling support for bundling.

Source 1

Using a create-react-app typescript project, you should have installed typescript and ts-jest (or the create-react-app should handle the dependencies based on wether you ejected the app or not).

Also ts-jest has some information about it:

By default ts-jest uses TypeScript compiler in the context of a project (yours), with full type-checking and features. But it can also be used to compile each file separately, what TypeScript calls an ‘isolated module’. That’s what the isolatedModules option (which defaults to false) does.

Source 2

As soon as you use the export command you are creating a module out of what is being exported.

If you are using ts-jest, you can add these settings without affecting your other modules, which the create-react-app will consist off.

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

And checkout the ts-jest page (second source) for the pro's and con's.

— LSR
quelle