Главная Категории Контакты Поиск

Настройка TypeScript для React и JSX

Из-за природы JSX, чтоб TypeScript и React отлично сочетались друг с другом, для этого потребуется немного настроить сам TypeScript .

TypeScript ·04.10.2019·читать 2 мин 🤓·Автор: Alex Myzgin

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 .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

У нас особо ничего не поменялось, только теперь нужно добавить в 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.

Website, name & logo
Copyright © 2019. Alex Myzgin