Typescript

Question

我想为 HTMLElementTagNameMap 中的所有接口添加链接功能。由于它们有几十个并且所有元素都是 HTMLElement 或扩展它，我认为应该有一种方法可以做这样的事情：

interface HTMLElement {
    doSomething<K extends keyof HTMLElementTagNameMap>(anArgument: any): HTMLElementTagNameMap[K]
}

这当然行不通，因为每个扩展 HTMLElement 的接口现在都包含一个 doSomething 方法，该方法预期 return 任何 HTMLElementTagNameMap 值。相反，我希望 HTMLTableElement.doSomething 到 return 类型为 HTMLTableElement 的对象，HTMLDivElement.doSomething 到 return 类型为 HTMLDivElement 的对象等等。

这样的概括是否可能，或者我是否需要为每个接口'duplicate'它？

如果可能的话，我该怎么做？

Answer 1

我认为 return 类型的 this 是您想要的。

Here's a demo:

interface HTMLElement {
    foo(): this;
}

const a = document.createElement("a");

// ...

const aFoo = a.foo();
//    ^^^^
// HTMLAnchorElement

// ...

在演示中，您可以将鼠标悬停在分配有调用 foo 结果的变量上，然后查看类型是相应 HTML 元素的接口。

Typescript - 是否可以从扩展接口引用接口？

Typescript - Is it possible to reference interfaces from extended interface?

typescript-generics

typemaps