Разбор

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. Причина — небольшое различие в том, как JavaScript и TypeScript обрабатывают импорт по умолчанию. Можно исправить, изменив импорт React на import * as React from "react".

Если хочется сохранить импорт по умолчанию, нужно создать tsconfig.json в корне проекта:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

Затем нужно будет остановить сборку, удалить кеш (там есть скрытый каталог с файлами parcel) и затем перезапустить parcel, чтобы он принял изменения конфигурации.

rm -rf .cache
parcel 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

Однако TypeScript всё равно выдаст ошибку на импорт React: This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.. Нужно добавить в tsconfig.json флаг allowSyntheticDefaultImports: true:

{
  "compilerOptions": {
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  }
}

Если допустить ошибку — например, не вернуть ничего из render — TypeScript сообщит об этом ещё до компиляции.