Dlaczego błąd --isolatedModules jest naprawiany przez dowolny import?

139

W projekcie maszynopisu Create-React-App próbowałem napisać to, aby szybko przetestować niektóre rzeczy:

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

Ale daje mi następujący błąd, z czerwoną falistą pod spodem it:

Wszystkie pliki muszą być modułami, jeśli podano flagę „--isolatedModules”.

Jeśli jednak zmienię plik na następujący, to najwyraźniej wszystko jest w porządku (z wyjątkiem nieużywanego importu oczywiście):

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

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

Czemu? Co tu się dzieje? Co --isolatedModuleswłaściwie znaczy / co zrobić?

typescript

— Svish
źródło

Jeśli używasz importlub exportwtedy ten plik jest modułem ES6. Twój najlepszy przykład jest problematyczny, ponieważ itnie jest nigdzie zdefiniowany, w architekturze modułowej musiałbyś itskądś zaimportować

— apokryfos

268

Typescript traktuje pliki bez importu / eksportu jako starsze pliki skryptów. Ponieważ takie pliki nie są modułami i wszelkimi definicjami, które zostały scalone w globalnej przestrzeni nazw. isolatedModuleszabrania takich plików.

Dodanie dowolnego importu lub eksportu do pliku powoduje, że jest to moduł, a błąd znika.

Również export {}jest wygodnym sposobem , aby plik modułu bez importowania czegokolwiek.

— Titian Cernicova-Dragomir
źródło

Dziękuję, to takie proste, ale kiedy tworzysz swój pierwszy test, zdumiewa Cię błąd.

— Juangui Jordán

2

@ JuanguiJordán tak łatwo, tak źle. Jeśli nie chcesz, isolatedModulespo prostu ustaw je na false.

— Wojciech Bednarski

Dzięki @WojciechBednarski, ale czy możesz rozwinąć trochę swoją odpowiedź?

— Juangui Jordán

2

@ JuanguiJordán Cóż, to jest jak dodanie jakiejś reguły, a następnie zignorowanie jej przez dodanie @ts-ignore. To export {}po prostu inna składnia, sposób na ominięcie reguły, ale w zasadzie tak jest.

— Wojciech Bednarski

3

Nie widzę problemu z ogólnymi zasadami, które są przestrzegane przez 99% czasu, ale czasami trzeba je złamać. Konieczność „złamania reguły”, o ile zasada jest ogólnie dobra, zmusza mnie do przemyślenia tego, co robię i zastanowienia się, czy istnieją lepsze sposoby rozwiązania czegoś. A czasami nie ma. Tak jak w tym przypadku, gdy robiłem plik testowy, aby coś wypróbować.

— Svish

25

Właściwy sposób to powiedzieć TypeScript, czego chcesz. Jeśli nie chcesz isolatedModulesutworzyć tsconfig.jsonw swoim testkatalogu i dodać:

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

Dodanie "isolatedModules": truedo konfiguracji, a następnie oszukanie kontrolera TypeScript przez dodanie pustego export {}zapachu do mnie złego kodu.

— Wojciech Bednarski
źródło

jak wyjaśniono w innych komentarzach, w tym konkretnym przypadku nie będzie to liczone jako zapach kodu, tutaj jest to konieczne, ponieważ nie ma innego sposobu, aby częściowo wykluczyć jakiś plik z reguły isolutedModules

— Akshay Vijay Jain

Hmm, kiedy przekręcam wartość true do false, otrzymuję odpowiedź: TypeError: Nie można przypisać właściwości tylko do odczytu „isolatedModules” obiektu „# <Object>” at verifyTypeScriptSetup

— Jerry Asher

@JerryAsher to samo tutaj człowieku, ale zadziałało wcześniej, a potem przywróciłem jakiś kod i próbowałem go uruchomić, a wtedy otrzymałem dokładnie ten sam błąd.

— Ganesh Kumar

github.com/vercel/next.js/issues/7959

— nos nart

1

Spróbujmy sprawdzić pojedyncze moduły. Kiedy sprawdzałem Google, nie ma bezpośredniego kontekstu.

Zasadniczo oznacza to, że pozwalasz Typescript na kompilowanie modułów w izolacji.

Ale pochodzi z Typescript i ma coś wspólnego z tym, że Typescript preferuje moduły zamiast przestrzeni nazw.

Moduły są również zależne od modułu ładującego (takiego jak CommonJs / Require.js) lub środowiska wykonawczego, które obsługuje moduły ES. Moduły zapewniają lepsze ponowne wykorzystanie kodu, silniejszą izolację i lepszą obsługę narzędzi do tworzenia pakietów.

Źródło 1

Korzystając z projektu maszynopisu create-react-app, powinieneś mieć zainstalowaną maszynę do pisania i ts-jest (lub aplikacja create-react-app powinna obsługiwać zależności w zależności od tego, czy wyrzuciłeś aplikację, czy nie).

Zawiera również ts-jestinformacje na ten temat:

Domyślnie ts-jest używa kompilatora TypeScript w kontekście projektu (Twojego), z pełnym sprawdzaniem typu i funkcjami. Ale można go również użyć do skompilowania każdego pliku osobno , co TypeScript nazywa „izolowanym modułem”. To właśnie robi opcja isolatedModules (która domyślnie ma wartość false).

Źródło 2

Jak tylko użyjesz exportpolecenia, tworzysz moduł z tego, co jest eksportowane.

Jeśli używasz ts-jest, możesz dodać te ustawienia bez wpływu na inne moduły, z których będzie się składać aplikacja create-reagent.

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

I sprawdź stronę ts-jest (drugie źródło) dla profesjonalistów i przeciwników.

— LSR
źródło

0

Nadal masz błąd pomimo eksportowania rzeczy z tego „pliku błędów”?

Check if you don't export same name that you already export in another file (konflikt)
After your fix try to stop and start your npm/yarn runner (Doświadczyłem, że nie można go naprawić nawet po ciężkim przeładowaniu strony, zwłaszcza gdy masz inny błąd w innym miejscu)

— Sebastian Voráč
źródło