Problème: je travaille sur un fichier qui contient de nombreux types conditionnels qui dérivent leurs types à partir de types conditionnels précédemment définis, ce qui est devenu très complexe et difficile à déboguer sur la façon dont un type est dérivé.
J'essaie de trouver un moyen de "déboguer" ou de lister comment le compilateur TypeScript effectue sa détermination sur un type conditionnel et choisit un chemin pour dériver le type ultime.
J'ai parcouru les options du compilateur et je n'ai encore rien trouvé dans ce domaine ...
Une analogie avec ce que je recherche en ce moment est l'équivalent du DEBUG=express:*
type de paramètre que l'on pourrait utiliser si vous vouliez voir ce que faisait un serveur express.
Cependant, le problème réel que j'essaie de résoudre est de pouvoir déconstruire et déboguer comment un type est dérivé dans une grande définition de type hiérarchique complexe.
Remarque importante: je n'essaie pas de déboguer l'exécution au moment de l'exécution du projet TypeScript. J'essaie de déboguer la façon dont les types sont calculés par le compilateur TypeScript.
interface
avec un nom de conteneur auto-documenté au lieu d'un génériquetype
qui tente d'étendre son définition dans l'info-bulle de l'EDI) ou simplement refactoriser la source pour éviter toute surutilisation de types conditionnels complexes.Réponses:
Il n'y a pas de mécanisme intégré en tapuscrit pour déconnecter les informations souhaitées en question. Cependant, si vous êtes intéressé à comprendre le travail interne, voici l'endroit dans le code source où la résolution effective des types conditionnels se produit.
Jetez un oeil à ces endroits en
checker.ts
.ln: 13258
instantiateTypeWorker()
ln: 12303
getConditionalType()
ln: 12385
getTypeFromConditionalTypeNode()
ln: 12772
getTypeFromTypeNode()
Vous trouverez ci-joint un plug-in dactylographié à moitié fait que j'ai assemblé négligemment. Il déconnecte la structure des données brutes d'un
ConditionalType
. Pour comprendre cette structure, vérifiez types.ts ln: 4634.L'UX de ce plugin est terrible, mais cette structure vous indique comment dactylographié décide de la valeur finale d'un type conditionnel.
Afficher l'extrait de code
Quelques instructions ennuyeusement détaillées pour faire fonctionner ce plugin:
mkdir my-ts-plugin && cd my-ts-plugin
touch package.json
et écris{ "name": "my-ts-plugin", "main": "index.js" }
yarn add typescript fast-safe-stringify
index.ts
, utilisez tsc pour le compilerindex.js
yarn link
cd
dans le répertoire de votre propre projet ts, exécutezyarn link my-ts-plugin
{ "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }
à votretsconfig.json
(.vscode/settings.json)
cette ligne:{ "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"
, maintenant ouvrir un fichier de code ts et survoler la souris vers un nœud de type conditionnel, vous devriez voir une structure de données loooooong json ajoutée au fichier journal.la source
debugger
en pause quelque part puis regarder manuellement à travers les étendues locales dans les piles d'appels.getConditionalType()
enchecker.ts
faire un tapuscrit de construction personnalisée, l' insertion d' une logique d'effets secondaires pour vider les informations intermédiaires le long du chemin. Et cette fois, j'ai obtenu quelque chose d'un peu plus utile. Je vais nettoyer mon code et y attacher un peu plus tard.