如何在打字稿中设置 CustomEvent 详细属性的类型

Question

我使用了很多自定义事件，打字稿静态检查中的一个盲点是CustomEvent. 由于这个盲点，很多重构都会受到影响。为了弥补，我为CustomEvent. 因为我在整个应用程序中都使用它，所以我不想只为这种类型在所有地方都导入。

globals.d.ts - 通用自定义事件

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

我原以为这会奏效

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

有没有比全局通用更好的解决方案？

Answer 1

如果我正确理解这个问题，您可以全局定义一个基本泛型，然后根据需要从中派生实际类型：

// 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
}