如何捕获TypeScript函数参数字面量类型并推断返回类型？

核心问题分析 #

1. 字面量类型匹配失败：
   你提供的Type类型比较返回false，因为泛型S默认被设为string，传入字面量'a'时，S会被拓宽为string而非保留字面量'a'，导致S extends T（string extends 'a'）不成立，最终返回false。

2. Web Component getElement类型推断需求：
   需要支持两种调用场景：

   • 传入普通选择器（如'title__big'），手动指定泛型标签名，返回对应元素类型；
   • 传入标签名字面量（如'div'），自动推断返回对应元素类型。

解决方案 #

1. 修复字面量类型匹配问题 #

去掉S的默认string类型，让TypeScript自动捕获传入参数的字面量类型：

type Type<T extends string, S extends string> = T extends S ? S extends T ? true : false : never; 

function getElement<T extends string, S extends string>(s: S) {
  let value: unknown; 
  return value as Type<T, S>;
}
const result = getElement<'a'>('a'); // result类型为true

此时S会被推断为'a'，与T完全匹配，类型比较返回true。

2. Web Component getElement方法类型优化 #

通过函数重载区分不同调用场景，实现精准的类型推断：

class Component extends HTMLElement {
  constructor(shadowrootmode: 'closed' | 'open' = 'open') {
    super();
    this.attachShadow({ mode: shadowrootmode });
  }

  protected get shadowDom() {
    if (!this.shadowRoot) throw new Error('The shadow root is not attached');
    return this.shadowRoot;
  }

  // 重载1：手动指定标签名泛型，返回对应元素类型
  protected getElement<T extends keyof HTMLElementTagNameMap>(selector: string): HTMLElementTagNameMap[T];
  // 重载2：传入标签名字面量，自动推断元素类型
  protected getElement<S extends keyof HTMLElementTagNameMap>(selector: S): HTMLElementTagNameMap[S];
  // 重载3：传入非标签名选择器，返回基础Element类型
  protected getElement(selector: string): Element;

  // 方法实现
  protected getElement(selector: string) {
    const element = this.shadowRoot?.querySelector(selector);
    if (!element) throw new Error('Element not found.');
    return element;
  }

  test() {
    // 场景1：手动指定泛型，传入普通选择器 → 返回HTMLAnchorElement
    this.getElement<'a'>('title__big').click();
    // 场景2：传入标签名字面量 → 自动推断为HTMLDivElement
    this.getElement('div').click();
    // 场景3：传入普通选择器，不指定泛型 → 返回Element
    this.getElement('title__small').getAttribute('id');
  }
}
export { Component };

优化说明：

• 重载1覆盖了手动指定标签名的场景，无论选择器是什么，都返回指定的元素类型；
• 重载2自动捕获标签名字面量，让TypeScript自动推断对应的元素类型；
• 重载3处理非标签名选择器的情况，返回基础Element类型，保证类型安全。

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