Come posso vedere come TypeScript calcola i tipi?


18

Problema: sto lavorando a un file che ha molti tipi condizionali che derivano i loro tipi da tipi condizionali precedentemente definiti e questo è diventato molto complesso e difficile da eseguire il debug di come un tipo viene derivato.

Sto cercando di trovare un modo per "eseguire il debug" o elencare come il compilatore TypeScript sta facendo la sua determinazione su un tipo condizionale e selezionando un percorso per derivare il tipo finale.

Ho controllato le opzioni del compilatore e non ho ancora trovato nulla in quell'area ...

Un'analogia con quello che sto cercando in questo momento è l'equivalente del DEBUG=express:*tipo di impostazione che si potrebbe usare se si volesse vedere cosa stava facendo un server espresso.

Tuttavia, il vero problema che sto cercando di risolvere è quello di essere in grado di decostruire ed eseguire il debug di come un tipo viene derivato in una definizione di tipo gerarchica complessa e di grandi dimensioni.

Nota importante: non sto cercando di eseguire il debug dell'esecuzione di runtime del progetto TypeScript. Sto cercando di eseguire il debug di come i tipi vengono calcolati dal compilatore TypeScript.


Usa un buon IDE, crea un'istanza del tuo tipo e passa con il mouse sopra il valore nel file sorgente aperto nel tuo editor. C'è qualche informazione aggiuntiva desiderata che ti manca usando quel suggerimento?
Patrick Roberts,

@PatrickRoberts - grazie per la risposta. Quando lo faccio, punta a un tipo complesso che ha nidificati tipi condizionali. Ciò a sua volta indica un altro tipo complesso simile e continua e talvolta si dirama in un modo non ovvio. Sto cercando di capire come eseguire il debug del motivo per cui sta succedendo quel tipo di ramo di costruzione.
Guy

1
Penso che la tua domanda trarrebbe beneficio da un esempio concreto per dimostrarlo. Ho anche riscontrato la situazione che stai descrivendo prima, ma di solito trovo che la soluzione alternativa riscriva i tipi in modo che siano o più opachi (ad esempio un generico interfacecon un nome contenitore autocompensante invece di un generico typeche tenta di espandere il suo definizione nella descrizione comandi dell'IDE) o semplicemente il refactoring della fonte per evitare l'uso eccessivo di tipi condizionali complessi.
Patrick Roberts,

@PatrickRoberts che tenta di aggiornare questo repository a Hapi / Joi @ 16 e di eseguire il debug della generazione del tipo è ciò che porta a questa domanda. github.com/TCMiranda/joi-extract-type
Guy

@PatrickRoberts questo è il problema specifico relativo all'aggiornamento stesso per il contesto. github.com/TCMiranda/joi-extract-type/issues/22
Guy

Risposte:


1

Non esiste alcun meccanismo incorporato in dattiloscritto per disconnettere le informazioni desiderate in questione. Tuttavia, se sei interessato a comprendere il lavoro interno, ecco il posto nel codice sorgente in cui si verifica la risoluzione effettiva dei tipi condizionali.

Dai un'occhiata a questi luoghi in checker.ts.

ln: 13258 instantiateTypeWorker()
ln: 12303 getConditionalType()
ln: 12385 getTypeFromConditionalTypeNode()
ln: 12772getTypeFromTypeNode()


In allegato è un plugin dattiloscritto a metà che ho messo insieme con noncuranza. Disconnette la struttura di dati grezzi di a ConditionalType. Per capire questa struttura, controlla types.ts ln: 4634.

La UX di questo plugin è terribile, ma quella struttura ti dice come il dattiloscritto decida il valore finale di un tipo condizionale.

Alcune istruzioni fastidiosamente dettagliate per far funzionare questo plugin:

  1. mkdir my-ts-plugin && cd my-ts-plugin
  2. touch package.json e scrivi { "name": "my-ts-plugin", "main": "index.js" }
  3. yarn add typescript fast-safe-stringify
  4. copia e incolla questo snippet index.ts, usa tsc per compilarloindex.js
  5. yarn link
  6. ora cdal dir del tuo progetto ts, corriyarn link my-ts-plugin
  7. aggiungi { "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }al tuotsconfig.json
  8. aggiungi all'area di lavoro impostando (.vscode/settings.json)questa riga:{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
  9. apri la palette dei comandi vscode ed esegui:
    1. TypeScript: Select TypeScript Version... -> Use Workspace Version
    2. TypeScript: Restart TS Server
    3. TypeScript: Open TS Server Log
  10. dovresti essere in grado di vedere il plugin disconnettersi "PLUGIN UP AND RUNNING", ora apri un file di codice ts e passa il mouse su un nodo di tipo condizionale, dovresti vedere una struttura di dati json aggiunta al file di registro.

Grazie per quello @hackape. Ci ho provato e posso produrre alcuni registri che sono interessanti e praticamente elencano ciò che vedo in modo interattivo quando utilizzo VSCode, quindi non mi ha portato molto più lontano di dove mi trovavo. Buone istruzioni su come far funzionare quel plugin.
Guy

Ti ho dato la generosità. Anche se non mi ha portato alla soluzione, penso che con più sforzo da parte mia modificando quel plugin potrei probabilmente arrivarci e non riesco a immaginare che ci sarà una soluzione migliore a questo nel prossimo futuro. Grazie per il vostro aiuto e impegno!
Guy

1
@Guy Grazie per la generosità. Quindi ieri ho trascorso un altro paio d'ore cercando di ottenere risultati più utili. Hai ragione. La struttura di dati sopra acquisisce l'oggetto AST-ish della catena di tipi condizionali, ma è solo il risultato analizzato, non il risultato valutato. Per quanto riguarda il "perché" o il ramo condizionale che il resolver di tipo prende durante la valutazione, richiede il dump dei risultati di tutti i passaggi intermedi, un po 'come mettere una debuggerpausa da qualche parte, quindi guardare manualmente gli ambiti locali negli stack di chiamate.
hackape

1
Ho modificato getConditionalType()in checker.tsper creare un dattiloscritto personalizzato, inserendo una logica degli effetti collaterali per scaricare informazioni intermedie lungo il percorso. E questa volta ho avuto qualcosa di un po 'più utile. Pulirò il mio codice e allego un istante più tardi.
hackape

1
@Guy the gist is here
hackape
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.