visual studio code - Er det mulig å vise den fulle beregnede typen til en TypeScript-type/interface i VSCode (eller andre steder)

Når du holder musen over en type i VSCode, vises typen, men hvis du har en større type, viser den vanligvis som { a: string; ... 24 mer ...; z: string }. Er det mulig å få den til å vise hele typen på en eller annen måte?

På samme måte, hvis du har en kryssing av to typer, vil det noen ganger bare vise det som Type1 & Type2 i stedet for å vise hele typen, eller hvis du bruker Pick, vil det vise Pick<Type1, "a" | ... 23 til ... | "z">...

I alle disse tilfellene tror jeg det ville være nyttig å sjekke min forståelse av hva typescript gjør for å kunne se hele typen noen ganger, og jeg lurte på om det var en måte å gjøre det på, enten gjennom vscode eller på en eller annen måte gjennom typescripts verktøy.

Svar #1

Nei, det er det ikke. Imidlertid gjør den nyeste utgivelsen av TS dette bedre enn det var før. Når jeg feilsøker typer, bruker jeg noen teknikker for å avdekke komplekse typer.

Det viktigste er å lage typer for egenskapene du prøver å inspisere. Da kan du indeksere i objektet for å inspisere typene. Ikke ideelt, men enkelt og raskt.

const object1 = { a1: 4, b1: "test", c1: true, d1: ["test", "test2"], e1: { ea1: "yes", eb1: 3, ec1: [4] } as const } as const;
const object2 = { a2: 4, b2: "test2", c2: false, d1: ["testw", "testw2"], e2: { ea2: "no", eb2: 5, ec2: [8] } as const } as const;
const object3 = { a3: 4, b3: "test", c3: true, d3: ["test", "test2"], e3: { ea3: "never", eb3: 3, ec3: [4] } as const } as const;
const object4 = { a4: 4, b4: "test2", c4: false, d4: ["testw", "testw2"], e4: { ea4: "maybe", eb4: 5, ec4: [8] } as const } as const;
type testComplexType = typeof object1 & typeof object2 & typeof object3 & typeof object4;

type whatTypeIsThis = testComplexType["e1"]["ea1"]; //yes
type whatTypeIsThis2 = testComplexType["e2"]["ea2"]; //no
type whatTypeIsThis3 = testComplexType["e3"]["ea3"]; //never
type whatTypeIsThis4 = testComplexType["e4"]["ea4"]; //maybe

Svar #2

Dette svarer egentlig ikke på spørsmålet som ble stilt, men det er en løsning som gir deg den samme informasjonen.

Hvis du har en type som har mange egenskaper og du ikke får VS Code til å vise deg en full definisjon, er den beste måten jeg har funnet for å utforske typestrukturen på å lage en midlertidig const, begynne å skrive kode for å initialisere den, og bruke automatisk fullføring. For eksempel (ved å bruke HTMLInputElement som en tilfeldig type med mange egenskaper):

Eller hvis du har en stor streng unionstype, begynn å initialisere den med en strengliteral:

Relaterte artikler