Определение функции TypeScript generi c с параметрами «массив» и «член массива»

Question

Я бы хотел определить обобщенную функцию c, которая получает 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<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 здесь: ссылка

Причина в том, что поиск значений работает только для массивов stati c, их можно получить несколькими способами, и проще всего использовать массив только для чтения. Кроме того, только чтение должно дополнять ваш код, так как вкладки могут не измениться в любом случае.

Answer 2

Если вы хотите, чтобы эта функция могла принимать строковые массивы, вы можете сделать это.

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

Тогда вы получите желаемое автозаполнение, потому что в вашем примере тип ввода будет "Home" | "About" | "Contact". И вы получите ошибку, если попытаетесь выбрать selectedItem, которого нет в массиве