Типизированный 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. Поэтому, если вы заметили несоответствия, скорее поспешите уведомить об этом любым из возможных способов.