Поиск по сайту:

Использование TypeScript с React

Введение

TypeScript — это круто. Как и Реакт. Давайте использовать их вместе! Использование TypeScript позволяет нам пользоваться преимуществами IntelliSense, а также дает возможность дополнительно рассуждать о нашем коде. Кроме того, внедрение TypeScript не вызывает затруднений, поскольку файлы можно постепенно обновлять, не вызывая проблем в остальной части вашего проекта.

Предпосылки

Если вы хотите следовать этому руководству, вам понадобятся:

  • Один сервер Ubuntu 20.04, настроенный пользователем без полномочий root с правами sudo и включенным брандмауэром. Вы можете сделать это, следуя руководству по начальной настройке сервера Ubuntu 20.04.
  • Node.js и npm установлены. Вы можете сделать это с помощью Apt, используя NodeSource PPA. Следуйте варианту 2 нашего руководства по установке Node.js в Ubuntu 20.04, чтобы начать работу.

Настройка вашего проекта:

Предполагая, что вы выполнили все требования и установили Node.js и npm, начните с создания нового каталога. Здесь мы назовем его react-typescript:

  1. mkdir react-typescript

Перейдите в этот каталог в терминале:

  1. cd react-typescript/

Затем инициализируйте новый проект npm со значениями по умолчанию:

  1. npm init -y



Output
Wrote to /home/sammy/react-typescript/package.json:

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

После того, как это будет инициализировано, вы установите соответствующие зависимости React.

Установка зависимостей React

Сначала установите зависимости React react и react-dom:

  1. sudo npm install react react-dom

Затем создайте папку с именем src:

  1. mkdir src

Перейдите в этот каталог src:

  1. cd src/

Затем создайте файл index.html и вставьте его в папку src. Вы можете сделать это с помощью предпочитаемого вами текстового редактора. Здесь мы будем использовать nano:

  1. nano index.html

Теперь, когда файл index.html открыт, вы можете внести некоторые изменения и добавить следующее содержимое:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>React + TypeScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="main"></div>
  <script type="module" src="./App.tsx"></script>
</body>
</html>

Когда вы закончите, сохраните и закройте файл. Если вы используете nano, вы можете сделать это, нажав CTRL + X, затем Y и ENTER.

Мы будем использовать этот раздел, если вы предпочитаете использовать приложение Create React. Давайте сначала установим Parcel, чтобы добавить его в наш проект:

  1. sudo npm install parcel

Далее устанавливаем TypeScript:

  1. sudo npm install --location=global typescript

Затем установите типы для React и ReactDOM:

  1. sudo npm install @types/react @types/react-dom

После того, как все будет установлено, вернитесь в родительский каталог, используя две точки:

  1. cd ..

Запуск и запуск сервера разработки

Затем обновите package.json новой задачей, которая запустит ваш сервер разработки. Вы можете сделать это, сначала создав и открыв файл в предпочитаемом вами текстовом редакторе:

  1. nano package.json

Открыв файл, замените существующее содержимое следующим:

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "An example of how to use React and TypeScript with Parcel",
  "scripts": {
    "dev": "parcel src/index.html"
  },
  "keywords": [],
  "author": "Paul Halliday",
  "license": "MIT"
}

Когда вы закончите, сохраните и закройте файл.

Теперь вернитесь в каталог src:

  1. cd src/

Оказавшись в каталоге, создайте и откройте файл Counter.tsx, содержащий базовый счетчик:

  1. nano Counter.tsx

Добавьте в файл следующее содержимое:

import * as React from 'react';

export default class Counter extends React.Component {
  state = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

Когда вы закончите, сохраните и закройте файл.

Затем создайте файл App.tsx в предпочитаемом вами текстовом редакторе:

  1. nano App.tsx

Теперь, когда файл открыт, добавьте следующую информацию для загрузки счетчика:

import * as React from 'react';
import { render } from 'react-dom';

import Counter from './Counter';

render(<Counter />, document.getElementById('main'));

После добавления содержимого сохраните и закройте файл.

Затем обновите разрешения брандмауэра, чтобы разрешить трафик порта для 1234:

  1. sudo ufw allow 1234

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

  1. sudo npm run dev



Output

> react-typescript@1.0.0 dev
> parcel src/index.html

Server running at http://localhost:1234
✨ Built in 3.84s

Убедитесь, что все работает, перейдя по адресу http://ваш_домен_или_IP_сервер:1234 в браузере. На вашей странице должны быть следующие функции увеличения и уменьшения:

Ваш пример проекта теперь успешно запущен и работает.

Создайте приложение React и TypeScript

Если вы предпочитаете использовать из коробки.

Используйте флаг --typescript при вызове команды create-react-app:

Функциональные компоненты

Компоненты без состояния или функциональные компоненты могут быть определены в TypeScript как:

import * as React from 'react';

const Count: React.FunctionComponent<{
  count: number;
}> = (props) => {
  return <h1>{props.count}</h1>;
};

export default Count;

Мы используем React.FunctionComponent и определяем структуру объектов наших ожидаемых реквизитов. В этом сценарии мы ожидаем, что будет передано одно свойство с именем count, и мы определяем его в строке. Мы также можем определить это другими способами, создав интерфейс, такой как Props:

interface Props {
  count: number;
}

const Count: React.FunctionComponent<Props> = (props) => {
  return <h1>{props.count}</h1>;
};

Компоненты класса

Компоненты класса могут быть определены в TypeScript аналогичным образом, как показано ниже:

import * as React from 'react';

import Count from './Count';

interface Props {}

interface State {
  count: number;
};

export default class Counter extends React.Component<Props, State> {
  state: State = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <Count count={this.state.count} />
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

Реквизит по умолчанию

Мы также можем определить defaultProps в сценариях, где мы можем захотеть установить реквизиты по умолчанию. Мы можем обновить наш пример Count, чтобы отразить следующее:

import * as React from 'react';

interface Props {
  count?: number;
}

export default class Count extends React.Component<Props> {
  static defaultProps: Props = {
    count: 10
  };

  render () {
    return <h1>{this.props.count}</h1>;
  }
}

Нам также нужно перестать передавать this.state.count в компонент Counter, так как это перезапишет наш реквизит по умолчанию:

render () {
  return (
    <div>
      <Count />
      <button onClick={this.increment}>Increment</button>
      <button onClick={this.decrement}>Decrement</button>
    </div>
  )
}

Теперь у вас должен быть проект, настроенный на использование TypeScript и React, а также инструменты для создания собственных функциональных компонентов и компонентов на основе классов!