如何让TypeScript的getWidget函数根据入参自动推导返回类型？

问题：我希望我的getWidget函数能根据传入的参数自动返回对应的特定类型，而非当前返回的任一可能类型。请问在TypeScript中是否有实现方法？

可以通过泛型结合映射类型实现这个需求，核心是建立标签与对应类型的映射，并让TypeScript根据入参自动推导返回类型：

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

// 泛型约束让TypeScript根据入参推导返回类型
export function getWidget<T extends ExampleHtmlElementsName>(tagName: T) {
    return document.querySelector<ExampleHtmlElements[T]>(tagName);
}

// res会被自动推断为ExampleAccountCenterHTMLElement类型
const res = getWidget(ExampleHtmlElementsName.ExampleAccountCenter)

关键说明： #

• ExampleHtmlElements接口明确了每个枚举标签对应的具体元素类型，相当于一个类型字典。
• 泛型T被约束为ExampleHtmlElementsName的成员，TypeScript会根据传入的具体标签值，精准锁定T的类型。
• 返回值使用ExampleHtmlElements[T]获取对应类型，让函数的返回值类型与入参严格绑定，实现“传什么标签，返回对应类型”的效果。

内容的提问来源于stack exchange，提问作者HenriDev