TypeScript и React отлично сочетаются друг с другом, но для этого требуется немного настроить TypeScript из-за природы JSX. Опция компилятора для JSX просто должна быть настроена на “react” в tsconfig.json.
Чтобы использовать TypeScript с React - изменим расширение c ts на tsx index.ts файл, а также сделаем изменения в index.html. В index.html добавим место, где будет наше React приложение <div id="app"></div>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="./index.tsx"></script>
</html>Затем в index.tsx быстро создадим React приложение:
import React from "react";
import { render } from "react-dom";
class App extends React.Component {
render() {
return <div>Hi</div>;
}
}
render(<App />, document.getElementById("app"));Для сборки проекта мы используем parcel bundler. Как только мы запустим parcel index.html, увидим, что parcel сам установит React и необходимые зависимости автоматически.
Если мы откроем сервер - http://localhost:1234/ - у нас в консоле будет ошибка ReferenceError: React is not defined. Это можно исправить, изменив способ импорта React, сказав import * as React from "react". Из-за небольшого различия между тем, как JavaScript и TypeScript принимают этот импорт по умолчанию.
Если ты хочешь сохранить импорт по умолчанию, нужно создать то, что называется tsconfig.json, который содержит конфигурацию для компилятора. Создадим его в корне нашего проекта со значениями:
{
"compilerOptions": {
"jsx": "react"
}
}Затем нужно будет остановить сборку, удалить кеш (там есть скрытый каталог с файлами parcel) и затем перезапустить parcel, чтобы он принял изменения конфигурации.
rm -rf .cacheparcel index.htmlЕсли ты используешь текстовый редактор VS Code, то есть ещё одна вещь, на которую стоит обратить внимание, - это три крошечные точки возле импорта react и react-dom, которые говорят о том, что мы можем нажать Command + ., чтобы выполнить предлагаемые действия из VS Code.
VS Code предлагает установить отсутствующие пакеты типов, потому что типы для React и ReactDOM размещаются в организации @types на NPM. Мы автоматически добавим @types/react и @types/react-dom в наши зависимости.
npm i @types/react @types/react-domУ нас особо ничего не поменялось, только теперь нужно добавить в tsconfig.json новое значение allowSyntheticDefaultImports, так как TypeScript выдает ошибку на импорт React: This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.. Для этого нам нужно добавить allowSyntheticDefaultImports со значением true:
{
"compilerOptions": {
"jsx": "react",
"allowSyntheticDefaultImports": true
}
}Если попытаемся сделать что-то недопустимое, например: в классе после render ничего не вернуть, то ошибка будет ещё до компиляции. По сути, это говорит, что нам нужно вернуть что-то из render.