Добавьте TypeScript в существующее приложение CRA React-JavaScript

Зачем использовать TypeScript?

Включение TypeScript в ваш проект JavaScript может принести несколько преимуществ, особенно по мере увеличения размера и сложности вашего приложения. Будучи строго типизированным языком, TypeScript может повысить качество кода за счет выявления ошибок типов данных во время компиляции, а не во время выполнения. Кроме того, использование TypeScript становится особенно выгодным при работе с большими базами кода и сотрудничестве с другими разработчиками. Предоставляя четкое и краткое представление о поведении переменных, включая функции, методы и вычисления, TypeScript гарантирует, что все члены команды точно знают, чего следует ожидать и как их использовать.

Как добавить TypeScript в приложение React

В этом посте мы рассмотрим, как добавить TypeScript в существующее приложение React-JavaScript, созданное с помощью Create React App, включая интерфейс и серверную часть. Начнем с фронтенда.

1. Добавьте TypeScript во внешний интерфейс: установите TypeScript, выполнив следующую команду в своем терминале в корневом каталоге вашего внешнего интерфейса:

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

Эта команда устанавливает TypeScript и необходимые файлы объявлений TypeScript для Node.js, React, ReactDOM и Jest.

2. Измените расширения файлов: измените расширения всех файлов .js в каталоге внешнего интерфейса на .tsx для файлов TypeScript.

3. Обновите tsconfig.json: создайте или обновите файл tsconfig.json в корневом каталоге вашего внешнего интерфейса. Вот пример файла tsconfig.json, который можно использовать в качестве отправной точки:

{
  "compilerOptions": {
    "outDir": "./build",
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "lib": ["es6", "dom"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true
  },
  "include": ["./src/**/*"]
}

Эта конфигурация указывает выходной каталог для скомпилированных файлов TypeScript, используемую систему модулей (CommonJS), целевую среду (ES6), синтаксис JSX, библиотеки для включения и другие параметры.

4. Преобразуйте свои компоненты React. Преобразуйте свои компоненты React в TypeScript, добавив аннотации типов к реквизитам и состоянию, а также к функциям и переменным. Вам также может понадобиться установить @types пакеты для любых сторонних библиотек, которые вы используете.

Например, у вас может быть компонент, который выглядит следующим образом в JavaScript:

import React from 'react';

function MyComponent(props) {
  return <div>{props.text}</div>;
}

export default MyComponent;

Чтобы преобразовать этот компонент в TypeScript, добавьте аннотации типа к объекту props:

import React from 'react';

interface MyComponentProps {
  text: string;
}

function MyComponent(props: MyComponentProps) {
  return <div>{props.text}</div>;
}

export default MyComponent;

5. Обновите свой импорт. Если вы импортируете сторонние библиотеки в свои файлы JavaScript, вам может потребоваться изменить операторы импорта, чтобы использовать эквивалент TypeScript, который обычно import <library> from '@types/<library>';.

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

7. Обновите сценарии package.json. Обновите сценарии package.json, включив в них компилятор TypeScript как для интерфейса, так и для сервера. Например:

"scripts": {
  "start": "concurrently \"cd frontend && yarn start\" \"cd backend && yarn start\"",
  "build": "cd frontend && yarn build && cd ../backend && yarn build",
  "frontend": "cd frontend && yarn start",
  "backend": "cd backend && yarn start",
  "build:frontend": "cd frontend && yarn build",
  "build:backend": "cd backend && yarn build",
  "dev:frontend": "cd frontend && yarn start",
  "dev:backend": "cd backend && yarn watch"
}

Здесь скрипт build компилирует как внешний, так и внутренний код TypeScript, а сценарий start одновременно запускает внешний и внутренний серверы.

8. Перезапустите сервер разработки. Как и любые другие существенные изменения, внесенные в кодовую базу, перезапуск сервера разработки необходим после установки TypeScript и переименования файлов JavaScript. Это позволяет серверу перекомпилировать код и перестроить приложение, чтобы отразить внесенные вами изменения, гарантируя, что они правильно включены и видны в браузере.

Вот и все! Теперь вы можете воспользоваться многими преимуществами TypeScript в своем приложении React.

Удачного кодирования!