Question

我想定义一个接收2个参数的通用函数：

第一个参数是一组不同的字符串（字符串文字的组合）
第二个参数是第一个参数的成员

// something like:
function showTab<T>(options: T[], selected: T) {
   options.forEach(option => { ... });
}

如何获得Intellisense来帮助缩小第二个参数？

showTab(["Home", "About", "Contact"], "           // as I type this,
                                       ^ Home     // I want these suggestions
                                       ^ About
                                       ^ Contact

感觉到as const和infer指令的巧妙组合应该可以实现，但尚未弄清楚。

Answer 1

如果仅希望此函数能够接收字符串数组，则可以执行此操作。

function showTab<TItem extends string, T extends Array<TItem>>(options: T, selected: T[number]) {}

然后，您将收到所需的自动完成功能，因为在您的示例中，推断的类型将为"Home" | "About" | "Contact"。如果您尝试选择不在数组中的selectedItem，则会收到错误消息

Answer 2

只有选项的严格方法是将只读数组用作波纹管：

function showTab<T extends ReadonlyArray<any>>(options: T, selected: T[keyof T]) { }

const array = ['hello', 'mello'] as const;
const array2 = ['hello', 'mello', 5] as const;

showTab(array, 'hello');
showTab(array2, 'hello');
showTab(array2, 5);

showTab(array, 'hell'); // Error
showTab(array2, '3'); // Error
showTab(array2, 'hell'); // Error

TS游乐场在这里：link

原因是值查找仅适用于静态数组，可以通过多种方式来实现，并且最容易使用只读数组。另外，只读性应该补充您的代码，因为选项卡可能始终不会更改。

具有“数组”和“数组成员”参数的TypeScript泛型函数定义

2 个答案: