TypeScript - лучший способ использовать его с React

[Amney]

Почему именно TypeScript?​

В двух словах, преимущества использования TypeScript включают:

1. Выявление ошибок на ранних стадиях процесса разработки.
2. Упрощение понимания и сопровождения кода.
3. Обеспечение лучшего опыта разработки благодаря таким функциям, как автодополнение и проверка типов.

Начало работы​

Чтобы создать новое приложение React с TypeScript, используйте следующую команду:

npx create-react-app my-app --template typescript

Вот и все, Create React App CLI создаст новое приложение с правильно настроенным TypeScript, и вы сможете сразу же приступить к работе.

Однако если у вас уже есть приложение React, которое вы хотите преобразовать в TypeScript, вам придется выполнить несколько дополнительных шагов.
Однако не волнуйтесь, это довольно просто!

First, install TypeScript and other required packages:


Сначала установите TypeScript и другие необходимые пакеты:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Теперь переименуйте все файлы с расширением .js в файлы с расширением .tsx и не забудьте перезапустить ваш сервер разработки, прежде чем продолжить.
Также может потребоваться перезапуск редактора кода / IDE.

Последнее, что вам нужно сделать, это создать файл tsconfig.json.
Обычно этот файл создается при создании нового проекта, но поскольку это уже существующий проект, вам придется создать его самостоятельно.

В корневой папке вашего проекта создайте новый файл tsconfig.json и вставьте в него следующее:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Это практически все.
Имейте в виду, что включение TypeScript в существующем проекте может "внести" некоторые ошибки, или же обнаружаться конфликты.
Обычно это не страшно и даже может оказаться полезным и помочь вам решить несколько ошибок. Вам нужно будет разобраться с ними, прежде чем продолжать разработку.

Теперь, когда у нас есть работающее приложение TypeScript React, мы можем начать использовать TypeScript для улучшения нашей разработки.

Запись .tsx файлов​

Мы начнем с простого компонента React, который отображает заголовок. Затем мы используем TypeScript для добавления типов и безопасности типов в компонент. Наконец, мы скомпилируем код TypeScript в JavaScript и запустим приложение.
Сначала создадим простой компонент React, который отображает заголовок:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Hello, world!</h1>
    </header>
  );
};

export default Header;

Этот компонент Header не делает многого, он просто отображает элемент заголовка с текстом "Hello, world!". Мы можем написать этот компонент на TypeScript или JavaScript. Для этого примера мы напишем его на TypeScript.

Добавление типов с помощью TypeScript​

Теперь, когда у нас есть базовый компонент React, давайте добавим несколько типов с помощью TypeScript. Мы можем начать с добавления типов к нашим props и state:

import React from 'react';

interface HeaderProps {
  message: string;
}

const Header = (props: HeaderProps) => {
  return (
    <header>
      <h1>{props.message}</h1>
    </header>
  );
};

export default Header;

Как видите, мы добавили интерфейс для наших реквизитов и указали, что реквизит message имеет тип string. Таким образом, если мы попытаемся передать в реквизит message что-либо, отличное от строки, TypeScript выдаст нам ошибку.

Мы также можем добавить типы к нашему состоянию:

import React, { useState } from 'react';

const [count, setCount] = useState<number>(0);

const Header = (props: HeaderProps) => {
  return (
    <header>
      <h1>{props.message}</h1>
      <button onClick={() => setCount(count + 1)}>
        Click me!
      </button>
      <p>You've clicked the button {count} times.</p>
    </header>
  );
};

export default Header;

Как видите, мы добавили типы для нашего состояния и указали, что переменная состояния count имеет тип number. Таким образом, если мы попытаемся установить для переменной состояния count значение, отличное от числа, TypeScript выдаст нам ошибку.

Исследование безопасности типов в обработчиках событий React​

Одним из преимуществ использования TypeScript в React является то, что разработчики могут отлавливать ошибки в обработчиках событий. Обработчики событий - это способ реагирования на пользовательский ввод в приложениях React. Когда происходит событие, например, пользователь нажимает на кнопку, компилятор проверяет тип каждого параметра в функции обработчика событий, а также проверяет возвращаемый тип функции. Если в любом из них есть несоответствие, компилятор выдаст ошибку. Это означает, что разработчики могут отлавливать ошибки в своих обработчиках событий до выполнения кода.
Однако при использовании TypeScript с React есть некоторые потенциальные подводные камни. Одна из них заключается в том, что можно написать код, который является правильным TypeScript, но не будет компилироваться из-за ошибки в React. Например, посмотрите на следующий код:

class MyComponent extends React.Component {
  handleClick(event: MouseEvent) {
    // do something
  }
}

Этот код не скомпилируется из-за ошибки в React: "handleClick" должен быть объявлен как статический метод на "MyComponent". Однако этот код является правильным TypeScript, и он выдаст ошибку только при компиляции с React. Это означает, что при написании кода разработчикам необходимо помнить как о TypeScript, так и о React.

В заключение, TypeScript - это отличный способ улучшить ваш код React. Он поможет вам выявить ошибки, оптимизировать производительность и сделать ваш код более читабельным. Кроме того, его просто интересно использовать.