如何根据传递的参数推断出特定类型

Question

我想使我的get小部件函数结果根据我传递给函数的参数自动返回特定类型。有没有办法在打字稿中做到这一点?到目前为止，它给了我一种可能的类型作为返回，但不是与所提供的键对应的特定类型。

例子

export interface ExampleAccountCenterHTMLElement extends HTMLElement {
x: () => void;
}
export interface ExampleMiniFooterHTMLElement extends HTMLElement {
y: () => void;
}
enum ExampleHtmlElementsName {
ExampleMiniFooter = 'Example-mini-footer',
ExampleAccountCenter = 'Example-account-center',
}
interface ExampleHtmlElements {
[ExampleHtmlElementsName.ExampleAccountCenter]: ExampleAccountCenterHTMLElement,
[ExampleHtmlElementsName.ExampleMiniFooter]: ExampleMiniFooterHTMLElement,
}
export function getWidget(tagName: ExampleHtmlElementsName) {
return document.querySelector<ExampleHtmlElements[typeof tagName]>(tagName);
}
const res = getWidget(ExampleHtmlElementsName.ExampleAccountCenter)

Answer 1

在tagName上使用typeof不是一个好主意。你给tagName显式地赋值为ExampleHtmlElementsName，这就是typeof tagName的值。相反，让函数泛型化。

export function getWidget<T extends ExampleHtmlElementsName>(tagName: T) {
return document.querySelector<ExampleHtmlElements[T]>(tagName);
}

游乐场

---