typescript - 如何在 typescript 中设置 CustomEvent 详细信息属性的类型

Question

我使用了很多自定义事件， typescript 静态检查中的一个盲点是 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
}