如何让TypeScript泛型函数的第二个参数获得IntelliSense智能提示？

嘿，这个需求我太熟了！你想要的IntelliSense智能提示，确实可以通过TypeScript的as const和泛型推断来实现，甚至不用手动写infer也能搞定，我给你两种实用方案：

问题根源 #

你原来的函数showTab<T>(options: T[], selected: T)之所以没提示，是因为TypeScript默认会把["Home", "About", "Contact"]推断成string[]，而不是具体的字符串字面量联合类型——所以T会被解析成string，自然没法给出精确的提示。

方案1：调用时用as const断言 + 泛型约束 #

这种方式简单直接，通过as const把数组变成只读的字符串字面量元组，让TypeScript保留每个元素的具体类型：

function showTab<T extends string>(options: readonly T[], selected: T) {
  options.forEach(option => {
    // 你的逻辑
  });
}

// 调用时给数组加as const
showTab(["Home", "About", "Contact"] as const, "");

现在输入第二个参数时，IntelliSense就会自动弹出Home、About、Contact三个选项了——因为T被推断成了"Home" | "About" | "Contact"这个联合类型。

方案2：自动推断元组类型（无需手动加as const） #

如果想让用户调用更省心，不用每次都写as const，可以通过泛型直接推断元组的元素类型：

function showTab<T extends readonly string[]>(
  options: T,
  selected: T[number]
) {
  options.forEach(option => {
    // 你的逻辑
  });
}

// 直接调用就行，完全不用额外断言！
showTab(["Home", "About", "Contact"], "");

这里的关键是T[number]——它会提取元组T中所有元素的类型，自动生成"Home" | "About" | "Contact"的联合类型。TypeScript会自动把传入的数组推断成字面量元组，所以第二个参数的智能提示直接生效。

如果你的业务逻辑需要修改options数组（只读元组不能修改），可以把泛型约束改成T extends string[]，效果是一样的，只是少了对只读数组的兼容性。

额外补充（关于你提到的infer） #

如果你一定要用infer来实现，也可以写一个工具类型提取元组元素：

type TupleElements<T> = T extends readonly (infer U)[] ? U : never;

function showTab<T extends readonly string[]>(
  options: T,
  selected: TupleElements<T>
) {
  options.forEach(option => { /* ... */ });
}

不过这个和方案2的T[number]效果完全一致，属于多此一举，但也能满足你对infer的探索需求~

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