Как подправить метод js reduce что бы не ругался TypeScript?

Question

[IliaMal]

Здравствуйте.

Переезжаю на TypeScript, столкнулся с ошибкой, который не могу понять
Исходный js (преобразует инпуты из формы в массив):

const data = Array
        .from(form.querySelectorAll('input'))
        .reduce((acc, n) => ((acc[n.name] ||= []).push(n.value), acc), {});

Смысл этой функции в том что бы все инпуты в форме поместить в массив и отправить потом аяксом
Пример

<form action="/ajxa/" method="post" class="js-form form">
					<div class="form__wrap">
						<input type="tel" name="phone" value="[phone]">
					</div>
					<div class="form__wrap">
						<input type="email" name="email" class="is-valid"  value="[e-mail]">
					</div>
					<div class="form__wrap">
						<input type="text" name="name" class="is-valid"  value="Иван">
					</div>
					<button type="submit" class="btn">Отправить</button>
				</form>

Из формы надо получить массив:

[
'phone': "[phone]",
'email': "[e-mail]",
'name': "Иван",
]

В TypeScript я осилил до этого момента:

type NameInput = {
            name: string | number,
            value: string
        }

        const data = Array
            .from(doForm[i].querySelectorAll('input'))
            .reduce<string[]>((acc, n: NameInput) => ((acc[n.name] ||= []).push(n.value), acc), []);

Ошибка

Элемент неявно содержит тип any, так как выражение индекса не имеет тип number.

Я не могу понять в чем дело, я указал что тип ключа string | number что еще надо TypeScript?

Comments

[WbICHA]

То и означает. Ты пытаешься строчным значением обратиться к индексу массива, что, очевидно, почти наверняка обречено на неудачу.
А вообще для чего ты вообще NameInput сюда влепил? Он только вредит.

[IliaMal]

WbICHA, а какой тип надо задать индексу?

[WbICHA]

IliaMal, какой тип индекса у массива? Ну я даже не знаю, может, число? Да не, бред какой-то.
И, кстати, а тебя не смущает, что ты одномерный массив пытаешься использовать как двумерный?

[IliaMal]

WbICHA, У тебя какие то комплексы которые ты прикрываешь девиантным поведением? К чему эти остроты? Запишись в местный кружок КВН и тренируйся там, тут же технический вопрос.
Массив как ключ принимает содержимое тега name, там не число. На JS преобразование в массив работает, тут только вопрос как обозначить тип для TS.

[WbICHA]

IliaMal, если ты неспособен понять элементарные вещи даже после того, как тебе конкретно на них указали, то проблема явно не во мне.

Answer 1

[Евгений Журов]

В JS/TS массив не может быть подобного вида:

[
    'phone': "[phone]",
    'email': "[e-mail]",
    'name': "Иван",
]

Ну точнее, строго говоря, может, но это немного дичь. Я никого не знаю, кто так использовал бы массивы, да и TS на такое ругается всё равно. Понятно, для чего подобное может быть удобно в теории, но для этого давно придумали объекты и Map.

Так что может, вы все-таки имели в виду объект? Тогда можно что-то вроде этого сделать

const submitForm = (e: SubmitEvent) => {
  e.preventDefault();
  const form = e.currentTarget as HTMLFormElement;
  const data = Object.entries(form.elements).reduce<Record<string, unknown>>(
    (acc, [key, element]) => {
      if (isNaN(Number(key)) && 'value' in element) {
        acc[key] = element.value;
      }
      return acc;
    },
    {}
  );
  console.log(data);
};

const form = document.getElementById("form");
form?.addEventListener("submit", submitForm);

Впрочем, аналогично можно привести и к тому виду, который вы описали, лишь немного переделав.

Comments

[IliaMal]

Спасибо. Теперь все работает!

Answer 2

[Егор Живагин]

Если вы хотите иметь на выходе тип string[], почему не сделать просто acc.push(n.value) ?

Ошибка, если я правильно понимаю, простая:

n = { name: 'some name', value: 'val' }; // Исходя из типа NameInput, в n может попасть такое значение, например
acc[n.name] => acc['some name'] => не может у массива быть такого (строкового) индекса

Кажется, вам будет удобнее аккумулировать в объект, а не массив

Comments

[IliaMal]

Переписал на объект, все равно ругается на n.name

Смысл этой функции в том что бы все инпуты в форме поместить в массив и отправить потом аяксом
Пример

<form action="/ajxa/" method="post" class="js-form form">
					<div class="form__wrap">
						<input type="tel" name="phone" value="[phone]">
					</div>
					<div class="form__wrap">
						<input type="email" name="email" class="is-valid"  value="[e-mail]">
					</div>
					<div class="form__wrap">
						<input type="text" name="name" class="is-valid"  value="Иван">
					</div>
					<button type="submit" class="btn">Отправить</button>
				</form>

Из формы надо получить массив:

[
'phone': "[phone]",
'email': "[e-mail]",
'name': "Иван",
]