visual studio code - Ako môžem vidieť plne rozbalenú definíciu typu v Typescripte?

Ak mám zbierku typov, ktorá vyzerá trochu takto:

type ValidValues = string | number | null
type ValidTypes = "text" | "time" | "unknown"

type Decorated = {
  name?: string | null
  type?: ValidTypes
  value?: ValidValues
  title: string
  start: number
}

type Injected = {
  extras: object
}

// overriding the types from Decorated
type Text = Decorated & Injected & {
  name: string
  type: "text"
  value: string
}

Môj aktuálny kód obsahuje toho viac, ale toto ukazuje samotnú hlavnú myšlienku. Nechcem musieť dôverovať sebe, že správne pochopím vzťahy medzi typmi. Chcem, aby nástroje ukázali, na čo sa definícia typu Text „vyhodnotí“ po všetkej typej algebre.

Takže pre vyššie uvedený príklad dúfam, že polia špecifikované v Text prepíšu predchádzajúce deklarácie urobené v type Decorated a výstup hypotetického tooltipu by mi mal zobraziť niečo takéto:

{
  name: string
  type: "text"
  value: string
  title: string
  start: number
  extras: object
}

Existuje nejaký pohodlný spôsob, ako získať tieto informácie?

Odpoveď č. 1

Rýchle informácie o type zobrazované v IntelliSense často nechávajú niečo osloviť; zvyčajne dostanete jedinú reprezentáciu pre akýkoľvek daný typ, ktorá sa môže ukázať ako príliš stručná alebo dokonca príliš rozvláčna pre vaše účely. Existuje niekoľko návrhov, ako to urobiť flexibilnejším (napr. microsoft/TypeScript#25784 a microsoft/TypeScript#28508), aby používatelia mohli rozširovať/zbaliť definície typov vo svojich IDE. Ale neviem, či sa toho v blízkej alebo dokonca vzdialenej budúcnosti ujmú, takže počkať na to nemá zmysel.

Tu je alias typu, ktorý niekedy používam na pokus rozšíriť typ spôsobom, o ktorom hovoríš:

// expands object types one level deep
type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;

// expands object types recursively
type ExpandRecursively<T> = T extends object
  ? T extends infer O ? { [K in keyof O]: ExpandRecursively<O[K]> } : never
  : T;

Tieto používajú podmienené odvodzovanie typu na „skopírovanie“ typu T do novej typovej premennej O a potom typ mapovania podobný identite, ktorý prechádza cez vlastnosti skopírovaného typu.

Inferovanie podmieneného typu je konceptuálne nečinné, ale používa sa na rozdelenie unijných typov a na nútenie kompilátora vyhodnotiť „pravú“ vetvu podmienky (ak znovu definujete Expand<T> bez toho, kompilátor niekedy jednoducho vypíše mapovaný typ {[K in keyof RelevantType]: RelevantType[K]}, čo nie je to, čo chcete vidieť).

Rozdiel medzi Expand a ExpandRecursively je v tom, či by mali iba vypísať typy vlastností tak, ako sú (Expand), alebo či by mali rozbaliť typy vlastností (ExpandRecursively). Pri rekurzívnom prípade je užitočné sa nepokúšať preniknúť do primitívnych typov, preto je zahrnutá podmienka T extends object.

Dobre, uvidíme, čo sa stane, keď to použijeme na tvoj typ. V tvojom prípade nepotrebujeme ExpandRecursively, ale mohli by sme ho použiť... výsledok je rovnaký:

type ExpandedText = Expand<Text>;

ktoré sa, keď nad ním v IDE (aspoň v TypeScript Playground a VSCode) podržíme kurzor, zobrazí ako:

/* type ExpandedText = {
  name: string;
  type: "text";
  value: string;
  title: string;
  start: number;
  extras: object;
 } */

ako si chcel.

Odkaz na kód

Odpoveď č. 2

Len dopĺňam odpoveď jcalza o verzie, ktoré fungujú s funkciami.

Upravené pomôcky:

export type Expand<T> = T extends (...args: infer A) => infer R
  ? (...args: Expand<A>) => Expand<R>
  : T extends infer O
  ? { [K in keyof O]: O[K] }
  : never;

export type ExpandRecursively<T> = T extends (...args: infer A) => infer R
  ? (...args: ExpandRecursively<A>) => ExpandRecursively<R>
  : T extends object
  ? T extends infer O
    ? { [K in keyof O]: ExpandRecursively<O[K]> }
    : never
  : T;

Na test pridávam k typu Text kľúč subobject a pridávam funkčný rozhranie:

type Text = Decorated &
  Injected & {
    name: string;
    type: "text";
    value: string;
    subobject: Injected;
  };

interface SomeFunction {
  (...args: Text[]): Injected & { error: boolean };
}

Toto dáva:

Objekty stále fungujú dobre:

Odpoveď č. 3

Zistil som, že toto rozšírenie VS Code funguje na toto perfektne:

Zkrášliť TypeScript: Lepšie náhľady typov

Zobrazuje aj hlboko vnorené typy pri podržaní myši.

Súvisiace články