Problem: Pracuję nad plikiem, który ma wiele typów warunkowych, które wywodzą swoje typy z wcześniej zdefiniowanych typów warunkowych, a to stało się bardzo skomplikowane i trudne do debugowania w jaki sposób jest uzyskiwany typ.
Próbuję znaleźć sposób na „debugowanie” lub wyszczególnienie, w jaki sposób kompilator TypeScript ustala typ warunkowy i wybrał ścieżkę do uzyskania ostatecznego typu.
Przejrzałem opcje kompilatora i nie znalazłem jeszcze niczego w tym obszarze ...
Analogią do tego, czego teraz szukam, jest odpowiednik DEBUG=express:*
rodzaju ustawienia, którego można użyć, jeśli chcesz zobaczyć, co robi serwer ekspresowy.
Jednak faktycznym problemem, który próbuję rozwiązać, jest możliwość zdekonstruowania i debugowania sposobu, w jaki typ jest uzyskiwany w dużej złożonej definicji typu hierarchicznego.
Ważna uwaga: Nie próbuję debugować wykonania środowiska wykonawczego projektu TypeScript. Próbuję debugować sposób obliczania typów przez kompilator TypeScript.
źródło
interface
z samokontrującą nazwą kontenera zamiast ogólnego,type
który próbuje rozszerzyć jego definicja w podpowiedzi IDE) lub po prostu przeredaguj źródło, aby całkowicie uniknąć nadużywania złożonych typów warunkowych.Odpowiedzi:
W maszynopisie nie ma wbudowanego mechanizmu wylogowania żądanych informacji. Jeśli jednak jesteś zainteresowany zrozumieniem pracy wewnętrznej, oto miejsce w kodzie źródłowym, w którym faktycznie następuje rozwiązywanie typów warunkowych.
Spójrz na te miejsca w
checker.ts
.LN: 13258
instantiateTypeWorker()
ln: 12303
getConditionalType()
ln: 12385
getTypeFromConditionalTypeNode()
ln: 12772
getTypeFromTypeNode()
W załączeniu jest niedokończona wtyczka maszynopisu, którą niedbale opracowałem. Wylogowuje surową strukturę danych
ConditionalType
. Aby zrozumieć tę strukturę, sprawdź types.ts ln: 4634.UX tej wtyczki jest okropny, ale ta struktura mówi ci, jak maszynopis decyduje o końcowej wartości typu warunkowego.
Pokaż fragment kodu
Kilka irytująco szczegółowych instrukcji, aby uruchomić tę wtyczkę:
mkdir my-ts-plugin && cd my-ts-plugin
touch package.json
i napisz{ "name": "my-ts-plugin", "main": "index.js" }
yarn add typescript fast-safe-stringify
index.ts
, użyj tsc, aby go skompilowaćindex.js
yarn link
cd
do katalogu własnego projektu ts, uruchomyarn link my-ts-plugin
{ "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }
do swojegotsconfig.json
(.vscode/settings.json)
ten wiersz:{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
TypeScript: Select TypeScript Version... -> Use Workspace Version
TypeScript: Restart TS Server
TypeScript: Open TS Server Log
"PLUGIN UP AND RUNNING"
, teraz otwórz plik kodu ts i najedź kursorem myszy na jakiś węzeł typu warunkowego, powinieneś zobaczyć dłuższą strukturę danych json dodaną do pliku dziennika.źródło
debugger
gdzieś pauzy, a następnie ręcznego przeglądania lokalnych zasięgów w stosach wywołań.getConditionalType()
in,checker.ts
aby utworzyć niestandardowy skrypt maszynowy, wstawiając logikę efektów ubocznych, aby po drodze zrzucić informacje pośrednie. I tym razem dostałem coś bardziej przydatnego. Wyczyszczę kod i dołączę później treść.