Что за файлы tsx
Если сравнить компилятор tsc с фортепиано, то его опции сопоставимы с камертоном позволяющим настроить его наилучшим образом, что на практике означает сократить время сборки и повысить типобезопасность проекта.
strict
--strict - активирует все флаги, входящие в группировку строгого режима и сопутствующие повышению типобезопасности программы. На данный момент флаг strict активирует следующие опции компилятора: --strictNullChecks , --noImplicitAny , --noImplicitThis , --alwaysStrict , --strictFunctionTypes , --strictPropertyInitialization и --strictBindCallApply . Несмотря на то, что флаг strict активирует сразу все указанные флаги, при желании конкретные флаги можно отключить.
type: boolean default: false values: true , false
Ошибки компиляции TypeScript
Одним из преимуществ TypeScript является то, что он может автоматически обнаруживать ошибки в вашем коде, если типы не совпадают. Например, представьте, что в приведенном выше примере, для параметра name мы вызываем функцию .trim(). Если мы передадим переменную любого другого типа, это может привести к тому, что наш код вызовет ошибку при воспроизведении в браузере. Давайте посмотрим на наш обновленный пример, неправильно передав массив в функцию:
Это приведет к следующей ошибке TypeScript при запуске команды tsc index.ts:
Устанавливаем TypeScript
Сначала установите TypeScript, используя npm:
или с помощью yarn:
После глобальной установки вам будет доступна команда в терминале tsc.
suppressImplicitAnyIndexErrors
--suppressImplicitAnyIndexErrors - при активной опции --noImplicitAny подавляет ошибки, связанные с добавлением динамических свойств в объекты, у которых отсутствует индексное определение.
type: boolean default: false values: true , false
Пример для неактивной опции
Пример для активной опции
Ваше create-react-app с компонентами TypeScript
Внутри нашего App.tsx мы импортируем только что созданные компоненты и заменяем HTML по умолчанию из CRA. Параметры name и countBy должны соответствовать типам, объявленным в дочернем компоненте. Поскольку props являются необязательными, они также могут быть undefined, и будет использоваться defaultProps.
И это все, что вам нужно для начала работы с TypeScript в React! Чтобы увидеть, как работает ваше приложение запустите следующую команду в консоли:
Эта статья покажет вам, как быстро начать работать с TypeScript, и мы обсудим плюсы и минусы использования TS. TypeScript - это расширенный набор JavaScript и стандарта TC39. С помощью TS мы можем определять как простые, так и сложные статические типы для переменных в нашем коде.
TypeScript - это просто JavaScript с необязательным добавлением типов для ваших переменных. Вы можете писать в современном синтаксисе JavaScript (ES2015+) и использовать TypeScript, после чего с помощью компилятора преобразовывать TypeScript(.ts) в JavaScript(.js), и также при необходимости скомпилировать JavaScript с поддержкой предыдущих версий, таких как ES5.
Обратите внимание, что если вы используете require() или import/export, вам все равно нужно будет использовать сборщик для браузера, такой как Webpack, Rollup или SystemJS.
target (t)
--target , или сокращенно -t - указывает компилятору, с какой версией спецификации должен быть совместим генерируемый JavaScript код. По умолчанию установлена совместимость с ES3 . Кроме того, можно указывать совместимость с ES5 , ES2015 (она же ES6 ), ES2016 , ES2017 , ESNext . Стоит добавить, что ESNext равноценно latest version.
type: string default: es3 values: es3 , es5 , es6 / es2015 , es2016 , es2017 , esnext
Изменения React под TypeScript
Чтобы использовать React с TypeScript, вы должны внести небольшие изменения в подходе создания стандартного приложения React.
Используйте .tsx файлы для JSX
В дополнение к новому расширению файлов .ts для TypeScript есть также новое расширение файла .tsx. Это расширение, которое вы должны использовать каждый раз, когда включаете синтаксис JSX в файл компонента React. TypeScript способен компилировать JSX напрямую в JavaScript.
Импорт React и ReactDOM
Вы можете заметить, что в компонентах по умолчанию используется следующий синтаксис:
С TypeScript вы больше не сможете делать стандартные импорты фида:
React экспортируется как модуль CommonJS, который не использует default export. На данный момент, не обязательно точно знать, почему, а просто знать, как вы должны импортировать React, чтобы он работал. Это также означает, что вы объявляете свои компоненты как:
checkJs
type: boolean default: false values: true , false
Кроме этого, при активной опции --checkJS компилятору с помощью аннотации /** @type <. >*/ можно указывать типы прямо в файлах с расширением .js .
При использовании JavaScript в TypeScript коде нарушается типобезопасность программы.
--jsx - данная опция указывает компилятору, какое расширение указывать .tsx файлам после компиляции. Все дело в том, что у React существует два вида приложений, одни создаются для веб-платформы, другие для мобильных платформ. Кроме того, файлы для веб-платформы на входе должны иметь расширение .jsx , в, то время как для мобильной платформы — .js . Поэтому компилятору нужно указывать, в какой именно формат преобразовывать файлы с расширением .tsx .
При указании "react" в качестве значения опции --jsx компилятор преобразует .tsx в .jsx файлы, которые затем компилируются в .js . Если в качестве значения будет указано "preserve" , то компилятор преобразует .tsx в .jsx , которые сохраняют XML-подобный синтаксис. Если указать значение "react-native" , то компилятор преобразует файлы .tsx в требующийся .js .
type: string default: preserve values: react , react-native , preserve
Инициализируйте свое приложение React с помощью TypeScript
Вызовите команду create-react-app с дополнительной опцией TypeScript, чтобы сгенерировать приложение React с использованием TypeScript в качестве синтаксиса JS по умолчанию.
npx - это команда, выпущенная с npm 5.2, которая позволяет вам выполнять команды CLI и исполняемые файлы, размещенные в локальном node_modules - это означает, что глобальные установки больше не требуются.
Если вы ранее использовали приложение create-react-app, это должно выглядеть очень знакомо. Дополнительной флаг --typescript говорит CRA использовать TypeScript в качестве синтаксиса по умолчанию и добавить соответствующую конфигурацию, чтобы он работал «из коробки».
Это создаст следующие файлы и структуру папок:
Ниже описание каждой части:
- tsconfig.json объявляет параметры TypeScript. Он находится в корне проекта и указывает параметры компилятора и файлы для включения.
- tslint.json - это настройки линтера, которые будут использоваться TSLint.
- public - это папка статических ресурсов, которые будут доступны пользователям, такие как документ HTML и файл манифеста.
- src содержит код пользовательского приложения. Это включает в себя наши компоненты TypeScript и стили CSS. Традиционный файл index.js был заменен на index.tsx в качестве точки входа.
suppressExcessPropertyErrors
--suppressExcessPropertyErrors - если данная опция активна, то компилятор перестает проверять литералы объекта на излишние члены.
type: boolean default: false values: true , false
Компонент класса
Чтобы показать основы компонента класса, мы заменим описание
в App.tsx на счетчик. Одним из ключевых различий между классом и функциональным компонентом является то, что компонент класса может поддерживать свое собственное состояние. Другим основным отличием является возможность доступа к методам жизненного цикла, описание которых выходит за рамки данного руководства.
Создайте файл ./src/Description.tsx и добавьте следующий код.
Мы начнем с объявления интерфейса для IProps и IState. Будет необязательный счетчик вызовов счетчика, который будет определять значение приращения. Сам компонент будет вести подсчет, используя свое состояние.
Функциональный компонент без хранения состояния
Чтобы продемонстрировать функциональный компонент с props, мы заменим заголовок в App.tsx нашим собственным компонентом . Создайте файл ./src/Header.tsx. Он получает параметр name. Внутри нашего файла мы создадим функциональный компонент:
Начнем с импорта React. Затем мы объявляем интерфейс IProps с единственным параметром name. Мы указали что параметр необязательный, это задается симфолом “?”. Обозначение ключа как необязательного означает, что входной параметр может быть или string или undefined.
При создании компоненты Header, обратите внимание на React.SFC. «SFC» обозначает функциональный компонент без сохранения состояния в прототип. Хотя это объявление не является обязательным, оно позволяет нам использовать defaultProps.
Далее, мы объявляем тип входного параметра как IProps, ссылающийся на созданный нами интерфейс.
Установка с помощью create-react-app
create-react-app это инструмент командной строки, который позволяет разработчикам легко создавать новые приложения React с разумными настройками по умолчанию и нулевой конфигурацией.
Примечание. Этот шаг теперь необязательный. TypeScript можно установить с помощью npx, который будет показан в следующем разделе.
extends
extends - с помощью этого свойства можно расширять конфигурацию tsconfig.json .
type: string default: "" values: *
Кроме того, при использовании механизма расширения ( extends ) поиск файла конфигурации tsconfig.json может осуществляться по пакетам ( packages ) NodeJS модулей, находящихся в директории node_modules .
Алгоритм разрешения аналогичен алгоритму поиска модулей самого NodeJS . Проще говоря, если путь, указанный в качестве значения атрибута extends не будет найден в директории node_modules , находящейся в текущей директории, то поиск продолжится в директории node_modules вверх по дереву. Но есть одна особенность, которая заключается в том, что при разрешении пути компилятор tsc , зайдя в директорию node_modules , сначала проверяет package.json на наличие атрибута tsconfig , которому в качестве значения указывают путь до конфигурационного файла. Если атрибут tsconfig найден, то конфигурация, на которую он ссылается, будет установлена в качестве расширяемой. Если package.json не содержит атрибут tsconfig , то в качестве расширяемого конфигурационного файла будет выбран файл tsconfig.json , находящийся в корне директории. Если в корне директории файла tsconfig.json найдено не будет, то поиск продолжится вверх по дереву.
Цель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.
Так же, автор пишет эту статью для структурирования собственных мыслей, знаний и практического опыта, и получает хорошую мотивацию на изучение новых аспектов разработки.
Автор полностью открыт для доработки и исправления текущей статьи, и надеется на превращение итогового материала в актуальный и удобный справочник, интересный и для профессионалов, и для желающих опробовать новые для них технологии.
Статья не рассматривает подробный синтаксис TypeScript и основы работы с React, если читатель не имеет опыта использования указанных выше технологий, рекомендуется разделить их изучение.
Немного об используемых технологиях:
Написание проекта на TypeScript влечет за собой множество трудностей, особенно при первом знакомстве с языком. На взгляд автора, преимущества строгой типизации стоят этих усилий.
Помимо возможностей самого языка, компилятор TypeScript генерирует JavaScript код под все версии стандарта, и позволяет отказаться от использования Babel в проекте (автор не имеет ничего против этого замечательного инструмента, но одновременное использование TS и Babel вносит небольшую путаницу на старте).
React — зарекомендовавшая себя библиотека для создания веб-интерфейсов, с огромным сообществом и инфраструктурой.
Недавно вышла новая версия библиотеки со множеством улучшений и переработанной документацией.
Для сборки проекта мы будем использовать Webpack — лучший друг frontend разработчика. Базовые настройки этого инструмента очень просты в изучении и использовании. Серьезно.
Начнем!
Репозиторий проекта содержит код в отдельных ветках под каждый шаг.
Шаг первый — добавление TypeScript в проект.
Для просмотра итогового кода:
git checkout step-1
npm i webpack typescript awesome-typescript-loader --save-dev
awesome-typescript-loader — TypeScript загрузчик для webpack, считается быстрее основного конкурента — ts-loader.
Для исходников нашего проекта создадим папку src .
Результаты сборки будем отправлять в dist .
Базовые настройки для компилятора TypeScript — файл tsconfig.json в корневой директории проекта
Базовые настройки сборщика — файл webpack.config.js в корневой директории проекта:
Внутри src создадим файл index.ts с любым кодом, использующим синтаксис TypeScript, например:
Команда для компиляции и сборки нашего кода:
webpack — разовый билд проекта
В итоговом файле dist/app.bundle.js внутри webpack модулей вы увидите аккуратный и читаемый JavaScript код выбранной нами версии стандарта.
Созданное нами окружение легко расширить любыми библиотеками, и удобно использовать для создания прототипов (Ваша Любимая Технология + TypeScript).
Шаг второй — создание крохотного React приложения.
Для просмотра итогового кода:
git checkout step-2
npm i webpack react react-dom --save
npm i webpack @types/react @types/react-dom html-webpack-plugin clean-webpack-plugin --save-dev
html-webpack-plugin — плагин для генерации html-файла с подключенными результатами сборки.
clean-webpack-plugin — для очистки директории с результатами сборки.
@types/react и @types/react-dom — пакеты с декларацией соответствующих JS библиотек, дающие компилятору TS информацию о типах всех экспортируемых модулей.
Большая часть популярных JS библиотек имеет декларации, иногда они находятся в исходных файлах проекта, иногда — в замечательном репозитории DefinitelyTyped, который активно развивается благодаря сообществу, и в случае отсутствия или ошибок в существующей декларации, вы можете с легкостью вносить свой вклад для исправления этих проблем.
Внутри src создадим файл index.html с элементов для монтирования корневого react компонента:
Обновляем настройки webpack:
Обновим настройки компилятора TypeScript:
Перейдем к компонентам.
Необходимо изменить расширение у index.ts на index.tsx . Напишем код нашего компонента, и отобразим его на странице:
Добавим команду для компиляции и сборки нашего кода:
На данном этапе могут возникнуть вопросы к размеру сборки — автор уделит особое внимание разделению на production и development сборки, в следующих шагах. На первых этапах стоит акцент на минимально необходимых настройках и библиотеках, для полного осознания процесса.
Шаг третий — рецепты приготовления React и TypeScript
Для просмотра итогового кода:
git checkout step-3
Зависимости на этом шаге не меняются.
Рекомендуется ознакомиться с обобщениями на этом этапе — generics (дженерики)
Более подробно о стандартных React паттернах можно узнать из этой статьи.
1) Стандартный компонент, имеющий свойства и состояние
Создадим компонент simple.tsx , который будет выводит контролируемое поле ввода:
2) Компонент высшего порядка
Описание компонентов высшего порядка в официальной документации React — по ссылке
Статья, подробно расписывающая написание компонента высшего порядка на TypeScript (примеры из этой статьи частично заимствованы автором) — по ссылке
Если коротко, компонент высшего порядка (далее hoc) — это функция, которая принимает аргументом компонент (и по желанию дополнительные опции), и возвращает новый компонент, который выводит старый в методе render , передавая ему свои свойства и состояние.
Сигнатура выглядит так: (Component) => WrapComponent => Component
Так как TypeScript строго следит за тем, какие свойства мы передаем в компоненты, нам нужно определиться с интерфейсами этих свойств.
OriginProps — уникальные свойства компонента, hoc ничего о них не знает, только передает в компонент.
ExternalProps — уникальные свойства hoc.
InjectedProps — свойства, которые мы будем передавать в компонент из hoc, рассчитываются на основе ExternalProps и State.
State — интерфейс состояния hoc. Так как мы будем передавать компоненту все состояние hoc, State не может иметь свойств, которые отличаются от InjectedProps (либо мы должны передавать доступные свойства, не используя оператор расширения).
Перейдем к коду, напишем простой счетчик нажатий кнопки.
Создадим папку hoc , в ней компонент displayCount.tsx и hoc withCount.tsx
Далее, опишем использование нашего компонента высшего порядка:
Свойства и состояние WithCount(DisplayCount):
Свойства и состояние DisplayCount:
Здесь мы видим лишнее свойство increment , в случае необходимости от него можно избавиться, используя например метод omit в lodash.
3) Ленивая загрузка компонентов:
Для загрузки компонентов по требованию воспользуемся синтаксисом динамического импорта модулей.
В TypeScript этот синтаксис появился в версии 2.4.
Webpack, встречая динамический импорт, создает отдельный бандл для модулей, которые попадают под условие импорта.
Простейшее выражение для импорта:
Далее мы напишем компонент, который принимает функцию, возвращающую import, и выводит полученный компонент.
Создадим папку lazy , в ней компоненты lazyComponent.tsx и lazyLoad.tsx
LazyComponent — простой функциональный компонент, в реально приложении это может быть отдельная страница, или автономный виджет:
LazyLoad — универсальный компонент для загрузки и вывода динамического компонента.
В случае необходимости прокидывать свойства в динамический компонент, LazyLoad можно переписать на компонент высшего порядка.
Все-таки обновим настройки webpack, для возможности задавать бандлам имя:
И обновим настройки tsconfig.json — вручную укажем библиотеки, которые надо использовать TypeScript при компиляции. Нам нужна конкретно «es2015.promise», но для удобства добавим полный список по ES стандартам, и конечно DOM.
4) Render props
Описание компонентов с render property в официальной документации React — по ссылке
Для удобства использования таких компонентов, обычно предоставляется несколько способов рендера.
Рассмотрим два основных: свойство render и свойство children.
Создадим папку renderProps , в ней компонент displaySize.tsx и компонент windowQueries.tsx
Далее, опишем использование нашего компонента:
Описание свойства children для доступа к дочерним элементам (не обязательно):
Описание свойства с JSX элементом, может использоваться для компонентов разметки:
Заключение
Мы создали окружение для разработки на React и TypeScript с минимально необходимыми настройками, и написали несколько простых компонентов.
TypeScript позволяет отказаться от использования PropTypes, и проверяет свойства компонентов во время разработки и компиляции (PropTypes же выдает ошибки только в запущенном приложении).
Такое преимущество строгой типизации, как автодополнение, распространяется и на JSX, а в файлах — декларациях библиотеки React вы можете быстро увидеть все возможные свойства для встроенных JSX элементов.
В сложных проектах использование TypeScript полностью оправдает себя — мы увидим это в таких моментах, как использование Redux (благодаря интерфейсам для вашего store), и работа с внешним API.
В статье №2 мы рассмотрим следующее:
1) Подключение Redux
2) Стандартные рецепты React, Redux и TypeScript
3) Работа с API
4) Production и development сборка проекта
В последующих статьях автор планирует описать: создание прогрессивного веб-приложения (PWA), серверный рендеринг, тестирование с Jest, и наконец оптимизацию приложения.
Автор просит прощения за не самое удачное оформление статьи, и повторно просит вносить свои предложения, по улучшению восприятия и читаемости этой статьи.
Благодарю за внимание!
Update 22.10.2017: Добавлен рецепт lazy load компонентов
Update 17.02.2018: Добавлен рецепт компонента с render property, обновлены зависимости (для устранения ошибок с типом ReactNode)
Цель данной статьи — вместе с читателем написать окружение для разработки современных веб-приложений, последовательно добавляя и настраивая необходимые инструменты и библиотеки. По аналогии с многочисленными starter-kit / boilerplate репозиториями, но наш, собственный.
Статья полностью открыта для доработки и исправления, и, возможно, итоговый материал превратится в актуальный и удобный справочник, интересный и для профессионалов, и для желающих опробовать новые для них технологии.
Статья не рассматривает подробный синтаксис TypeScript и основы работы с React, если вы не имеет опыта использования указанных выше технологий, рекомендуется разделить их изучение.
Репозиторий проекта содержит код в отдельных ветках под каждый шаг.
Главная тема 2-й части — подключение и использование менеджера состояний Redux.
Причины использования Redux, и его сравнение с другими реализациями паттерна Flux — темы для отдельных статей, эту информацию легко найти и изучить.
Отмечу несколько преимуществ — большое сообщество и экосистема, возможность полного контроля над поведением вашего приложения, легкость в тестировании, и определенные шаги в сторону изучения функционального программирования.
React-redux — небольшая библиотека, которая дает нам несколько React компонентов — Provider, для передачи Redux хранилища в контекст, и connect, компонент высшего порядка для точечной передачи и обновления данных из хранилища в свойства обернутого компонента.
Перейдем к коду!
Шаг четвертый — добавление Redux в проект, базовый hello world
Для просмотра итогового кода:
В папке src удаляем компоненты — примеры с шага №3, остаются только index.html и index.tsx.
Установка зависимостей (redux включает в исходники файл — декларацию):
Изменение настроек проекта:
В tsconfig.json мы добавляем свойство moduleResolution: node, для того что бы компилятор находил декларации, определенные в package.json библиотеки (в нашем случае redux):
Создадим простые действия и редьюсер для будущего хранилища, используя методологию модулей ducks.
В папке с исходниками создаем папку redux для хранения ducks модулей. Внутри создадим файл field.ts:
Добавим в папку redux файл index.ts — именно его мы будем импортировать в хранилище в качестве корневого редьюсера (rootReducer).
Далее мы будем использовать инструменты для разработки на Redux — Redux DevTools.
В папке с исходниками создаем папку store, внутри файл index.ts:
Компилятор TypeScript ничего не знает о свойстве __REDUX_DEVTOOLS_EXTENSION__ глобального объекта window, поэтому пришло время добавить свои декларации.
Далее в эти декларации мы будем добавлять глобальные флаги, которые будем передавать через Webpack, например __DEV__ или __PRODUCTION__.
В корневой папке создаем папку typings, внутри файл window.d.ts:
Далее, напишем компонент, который получает данные из хранилища, и вызывает его обновление. Для упрощения, не будет разделения на компоненты и контейнеры. В папке с исходниками создаем папку components, внутри файл Field.tsx:
И наконец-то соберем все в нашем приложении, в точке входа — src/index.tsx:
Шаг пятый — несколько рецептов Redux на Typescript
Для просмотра итогового кода:
Рецепт первый — middleware.
В папке с исходниками создаем папку middlewares, внутри файл logger.ts (код взят из официальной документации):
Обновим код для создания нашего хранилища:
Рецепт второй — редьюсер высшего порядка.
В папке redux, создаем файл createNamedReducer.ts (код взят из официальной документации):
Шаг шестой — работа с API
Для просмотра итогового кода:
Внимание! Я предпочитаю выносить методы для работы с API в отдельные сервисы, и привязывать данные к хранилищу, вызывая эти методы внутри thunk действий.
Поэтому я хотел бы дополнить эту статью вашими советами и комментариями по связке Redux с REST API, и в будущем подробно описать самые популярные техники.
Для моков API воспользуемся сервисом jsonplaceholder.
Установка зависимостей (обе библиотеки содержат декларации):
Создадим папку services в исходниках проекта, внутри файлы client.ts и users.ts:
Далее создадим новый ducks модуль users.ts, как раз на этом этапе и возникает множество вопросов, и множество вариантов их разрешения:
Далее просто вызываем компонент в корневом компоненте нашего приложения.
Надо ли хранить объект запроса в хранилище, и какие преимущества это может дать? Возможно, это упростит отмену запросов.
Как поступать, когда один GET запрос с динамическим :id в url, используют множество компонентов, на одном экране?
Аналогичная проблема с асинхронным автокомплитом, когда на один запрос уходят разные параметры. Можно кэшировать ответы, но в таких случаях так же понадобится отслеживать отдельно состояния каждого из запросов, что требует отдельных редьюсеров.
Имеет ли смысл использовать компоненты, которые добавляют редьюсеры динамически, под один конкретный запрос, или часть асинхронных данных, которые используются только локально, вообще не нужно хранить в Redux?
Напишем обстоятельный комментарий к статье о том, как мы работаем с API в наших React + Redux приложениях, и перейдем к следующему шагу.
Шаг седьмой — production и development сборка
Для просмотра итогового кода:
1) Кроссбраузерность
Установка зависимостей:
Core-js — библиотека с полифиллами современных JS конструкций. Импорт модуля core-js/shim практически аналогичен использованию плагина babel-polyfill.
Мы используем только несколько необходимых полифиллов, добавим их в начало точки входа в приложение:
В файле tsconfig.json свойство «target» уже указано как «es5», поэтому нет необходимости в большинстве полифиллов. Текущая сборка поддерживает IE9+.
1) Production сборка
better-npm-run — прокачивает наши npm скрипты.
Отредактируем npm скрипты в package.json, переменные окружения очень удобно определяются в блоке «betterScripts»:
Когда настройки webpack усложняются, на помощь приходит плагин webpack-merge — в данный момент мы не будем его использовать, что бы не усложнять код.
Изменения в webpack.config.js:
Используем команду для production сборки:
По завершению сборки, мы получаем общий бандл размером около 180кб, примерно 55кб gzipped. В дальнейшем, библиотеки из node_modules можно выносить в отдельный бандл, используя CommonsChunkPlugin.
Темы для следующих статей: роутинг, создание прогрессивного веб-приложения (PWA), серверный рендеринг, тестирование с Jest.
Из этого туториала вы узнаете, как быстро приступить к созданию приложений React с использованием TypeScript без необходимости какой-либо настройки с помощью create-react-app (CRA). Предположим, что на вашем компьютере уже установлены Node и NPM. Ваше приложение TypeScript/React будет работать сразу после установки без необходимости использовать CRA. Кроме того, вы узнаете, как создавать свои собственные компоненты и управлять props и state, используя TypeScript.
jsxFactory
--jsxFactory - данная опция позволяет при трансляции файлов .tsx в .js переопределить фабрику рендера.
Установив желаемое значение текущей опции появляется возможность переопределить функцию рендера React на любую другую.
Кроме того, подобного поведения можно добиться при помощи нотации /** @jsx identifier */ , которая указывается в начале файла, а вместо identifier вписывается имя функции рендера.
Помимо этого, аннотация /** jsx identifier */ позволяет переопределить функцию рендера, переопределенную с помощью опции --jsxFactory .
type: string default: React.createElement values: "*"
Создание компонент
Одна из лучших особенностей использования TypeScript - вам больше не нужно использовать пакет prop-types. Есть небольшая магия при изучения использования TypeScript для props и state, но как только вы его поймете, он станет гораздо более мощным, чем методология React по умолчанию.
Вы определите интерфейс props для каждого из компонентов, которым вы передаете параметры. Вы определяете интерфейс объекта и где у каждого ключа может быть свой тип данных. Кроме того, вы можете объявить интерфейс для состояния (state) компоненты.
Компилируем .ts файлы
Используя терминал, создайте новый каталог с названием ts-simple с помощью следующей команды:
Перейдите в этот каталог и создайте файл index.ts. Внутри этого файла мы создадим функцию с именем sayHello и принимаемым аргументом name с типом string.
Теперь используем tsc для компиляции нашего index.ts:
Эта команда создаст новый файл index.js, предварительно удалив типизацию из параметра, а также преобразовав файл в код ES5. Полученный файл можно запустить в браузере или использовать в Node. Ваш файл будет выглядеть следующим образом:
Чтобы проверить это, запустите созданный файл, используя следующую команду:
noImplicitAny
--noImplicitAny - при активной опции выводит ошибку, если вывод типов установил принадлежность типа члена к any .
type: boolean default: false values: true , false
Пример с неактивной опцией
Пример с активной опцией
Дополнительные расширения файлов TypeScript
В дополнение к файлам с расширением .ts вы также можете использовать расшируение .d.ts для добавления типов в уже существующие библиотеки JavasScript или файлы .tsx для написания синтаксиса JSX в TypeScript для приложений с React.
Читайте также: