Вступление¶

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.

Вступление¶

Комментарии