Как задать тип для списка html-элементов?

#typescript

Вопрос:

Я создаю список опций для <select> элемента и помещаю <option> элементы в этот массив. Прямо сейчас тип массива таков any[] . Но как задать правильный тип для такого массива?

 let items: any[] = [];
     
for (let i = 0; i <= 30; i  ) {             
  items.push(<option key={i} value={i}>{i}</option>);   
}
 

Ответ №1:

Тип реагирующего элемента JSX.Element :

 let items: JSX.Element[] = [];
//         ^^^^^^^^^^^
     
for (let i = 0; i <= 30; i  ) {             
    items.push(<option key={i} value={i}>{i}</option>);
}
 

Ссылка на игровую площадку

Имейте в виду, что это не « option элементы» (то есть они не HTMLOptionElement являются экземплярами). Это JSX.Element экземпляры, которые при визуализации с помощью React будут создавать HTMLOptionElement экземпляры в документе.

Комментарии:

1. Был React.ReactNode[] бы более предпочтительный тип вместо этого?

2. @Harkunwar — Это зависит от того, для чего вы используете массив. В этом случае он содержит только JSX.Element экземпляры, так что на самом деле нет необходимости в более широком React.ReactNode типе. Но да, это тоже сработало бы.

3. @Ти Джей Краудер не могли бы вы, пожалуйста, рассказать, где можно почитать больше обо всех этих типах?

4. @newbie222 — Я нигде не видел этого хорошо задокументированного. Что я узнал о типах реакций, так это изучив исходный код других проектов и изучив определения типов в github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/… , к сожалению.

5. @Ти Джей Краудер хорошо, спасибо. Но откуда другие программисты получают такую информацию?? 😀