Problem: Ich arbeite an einer Datei mit vielen bedingten Typen, die ihre Typen von zuvor definierten bedingten Typen ableiten. Dies ist sehr komplex und schwierig zu debuggen, wie ein Typ abgeleitet wird.
Ich versuche einen Weg zu finden, um zu "debuggen" oder aufzulisten, wie der TypeScript-Compiler seine Bestimmung für einen bedingten Typ vornimmt und einen Pfad auswählt, um den endgültigen Typ abzuleiten.
Ich habe die Compiler-Optionen durchgesehen und noch nichts in diesem Bereich gefunden ...
Eine Analogie zu dem, wonach ich gerade suche, entspricht der DEBUG=express:*
Art der Einstellung, die man verwenden könnte, wenn man sehen möchte, was ein Express-Server tut.
Das eigentliche Problem, das ich zu lösen versuche, besteht jedoch darin, dekonstruieren und debuggen zu können, wie ein Typ in einer großen komplexen hierarchischen Typdefinition abgeleitet wird.
Wichtiger Hinweis: Ich versuche nicht, die Laufzeitausführung des TypeScript-Projekts zu debuggen. Ich versuche zu debuggen, wie die Typen vom TypeScript-Compiler berechnet werden.
interface
mit einem selbstdokumentierenden Containernamen anstelle eines Generikumstype
, das versucht, es zu erweitern Definition im Tooltip der IDE) oder einfach das Refactoring der Quelle, um eine übermäßige Verwendung komplexer bedingter Typen vollständig zu vermeiden.Antworten:
In Typoskript ist kein Mechanismus integriert, mit dem die gewünschten Informationen abgemeldet werden können. Wenn Sie jedoch daran interessiert sind, die interne Arbeit zu verstehen, finden Sie hier die Stelle im Quellcode, an der die tatsächliche Auflösung von bedingten Typen erfolgt.
Schauen Sie sich diese Orte in an
checker.ts
.ln: 13258
instantiateTypeWorker()
ln: 12303
getConditionalType()
ln: 12385
getTypeFromConditionalTypeNode()
ln: 12772
getTypeFromTypeNode()
Im Anhang befindet sich ein halbfertiges Typoskript-Plugin, das ich nachlässig zusammengestellt habe. Es protokolliert die Rohdatenstruktur von a
ConditionalType
. Um diese Struktur zu verstehen, überprüfen Sie types.ts ln: 4634.UX dieses Plugins ist schrecklich, aber diese Struktur sagt Ihnen, wie Typoskript den Endwert eines bedingten Typs entscheidet.
Code-Snippet anzeigen
Einige ärgerlich detaillierte Anweisungen, um dieses Plugin zum Laufen zu bringen:
mkdir my-ts-plugin && cd my-ts-plugin
touch package.json
und schreibe{ "name": "my-ts-plugin", "main": "index.js" }
yarn add typescript fast-safe-stringify
index.ts
und fügen Sie es mit tsc einindex.js
yarn link
cd
Führen Sie nun das Verzeichnis Ihres eigenen ts-Projekts ausyarn link my-ts-plugin
{ "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }
Ihrem hinzutsconfig.json
(.vscode/settings.json)
diese Zeile festgelegt wird:{ "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"
Öffnen Sie nun eine ts-Codedatei und bewegen Sie den Mauszeiger über einen Knoten vom bedingten Typ. Sie sollten eine lange json-Datenstruktur sehen, die der Protokolldatei hinzugefügt wurde.quelle
debugger
irgendwo eine Pause einlegen und dann die lokalen Bereiche in den Aufrufstapeln manuell durchsuchen.getConditionalType()
inchecker.ts
einen benutzerdefinierten Build Typoskript zu machen, einige Nebeneffekt Logik Einfügen auf dem Weg Zwischen Info auskippen. Und diesmal habe ich etwas Nützlicheres. Ich werde meinen Code bereinigen und später einen Kern anhängen.