Hur man anger typen för CustomEvent-detaljeegenskapen i TypeScript

Jag använder många anpassade händelser och en blind fläck i Typescripts statiska kontroll är typen av detalj i CustomEvent. Många refaktoriseringar påverkas negativt på grund av denna blinda fläck. För att kompensera har jag skapat en global typ för CustomEvent. Eftersom jag använder den över hela appen vill jag inte ha importer överallt bara för denna typ.

globals.d.ts - generisk anpassad händelse

interface VsCustomEvent<T> extends CustomEvent { detail: T }

Jag skulle ha förväntat mig att detta skulle fungera

handleSomeEvent = ({detail}: CustomEvent<boolean> ) => {
    this.doSomething(detail)
}

Finns det en bättre lösning än den globala generiska?

Svar #1

Om jag förstår frågan korrekt, kan du definiera en basgenerisk globalt och sedan härleda faktiska typer från den om det behövs:

// globals.d.ts
interface CustomEvent<Detail> {
  detail: Detail;
}

// some-file.ts
interface BooleanEvent extends CustomEvent<boolean> {}
interface StringEvent extends CustomEvent<string> {}

function handleBoolean({ detail }: BooleanEvent): void {
  // `detail` is a boolean
}

function handleString({ detail }: StringEvent): void {
  // `detail` is a string
}