Типизированный React
С данной главы начинается серия посвященная детальному рассмотрению темы связанной с популярной библиотекой рендера - React и поскольку она предусмотренна как водная, то расскажет лишь о создании условий необходимых для компиляции react
приложения.
Расширение .tsx
React — это библиотека для создания пользовательских интерфейсов от компании Facebook. В основе библиотеки продвинутого рендера React лежит компонентный подход, для улучшения которого, стандартный синтаксис JavaScript был расширен XML-подобным синтаксисом. Таким образом свет увидело новое расширение .jsx
.
Из-за высокой популярности React данное расширение получило свое типизированное представление в виде .tsx
. Но для того, что бы компилятор tsc смог компилировать .tsx
синтаксис, необходимо установить его опцию --jsx
в одно из значений - “react”
для вэб и настольных, а также “react-native”
для мобильных приложений. По умолчанию выставлено значение “preserve”
.
// @filename: tsconfig.json { "compilerOptions": { "jsx": "react" } }
Кроме того, помимо самого react
, необходимо установить его декларации.
npm i -D @types/react @types/react-dom
Поскольку на данный момент известно, что TypeScript, это всего-лишь надстройка над JavaScript, то единственный вопрос, способный возникнуть при первом знакомстве с типизированным React - "как правильно аннотировать ту или иную конструкцию". Поэтому цель общей темы, посвященной типизированному React, будет заключаться в подробном рассмотрении всех случаев способных возникнуть на начальном этапе.
Также необходимо уточнить, что возможности TypeScript позволяют аннотировать языковые конструкции как в классическом, так и в минималистическом типизированном стиле. В первом случае, аннотацию типа содержит каждая конструкция. Во втором, максимально допустимая часть работы перекладывается на вывод типов. Так как предполагается, что читатели хотят получить полную картину и, кроме того, возвращаться к произвольным частям материала в будущем, то весь код будет написан в классическом стиле. Кроме того, стоит оговорить, что на момент написание этой главы используется React v16.13.1
и TypeScript v4.1
. Поэтому, если вы заметили несоответствия, скорее поспешите уведомить об этом любым из возможных способов.