Если вы новичок в React и TypeScript, создание первого приложения React с TypeScript с использованием NPM может показаться немного утомительным. Но не бойтесь! В этой статье мы познакомим вас с несколькими методами создания приложения React с TypeScript с использованием NPM, с понятными объяснениями и примерами кода. Итак, начнём!

Метод 1: использование приложения Create React
Один из самых простых способов создать приложение React с помощью TypeScript — использовать Create React App (CRA). CRA предоставляет предварительно настроенную настройку для создания приложений React с нулевой настройкой. Чтобы создать новое приложение React с TypeScript, выполните следующие действия:

Шаг 1. Установите приложение Create React глобально (если оно еще не установлено), выполнив в терминале следующую команду:

npm install -g create-react-app

Шаг 2. Создайте новое приложение React с помощью TypeScript, используя следующую команду:

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

Эта команда создаст новый каталог под названием «my-app» и настроит базовое приложение React с TypeScript.

Метод 2: ручная настройка с помощью TypeScript
Если вы предпочитаете более ручной подход, вы можете настроить приложение React с помощью TypeScript, выполнив следующие действия:

Шаг 1. Инициализируйте новый проект NPM, выполнив в терминале следующую команду:

npm init -y

Шаг 2. Установите необходимые зависимости, выполнив следующую команду:

npm install react react-dom typescript

Шаг 3. Создайте новую структуру каталогов для вашего приложения React, выполнив следующие команды:

mkdir src
mkdir public
touch src/index.tsx

Шаг 4. Откройте файл src/index.tsxв текстовом редакторе и добавьте следующий код:

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
  <React.StrictMode>
    <h1>Hello, React with TypeScript!</h1>
  </React.StrictMode>,
  document.getElementById('root')
);

Метод 3: использование Create React App с шаблоном TypeScript
Create React App также предоставляет официальный шаблон TypeScript, который вы можете использовать для создания приложения React с TypeScript. Чтобы создать новое приложение React с шаблоном TypeScript, выполните следующие действия:

Шаг 1. Установите приложение Create React глобально (если оно еще не установлено), выполнив в терминале следующую команду:

npm install -g create-react-app

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

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

В этой статье мы рассмотрели три различных метода создания приложения React с TypeScript с использованием NPM. Независимо от того, предпочитаете ли вы использовать приложение Create React или настраивать проект вручную, теперь у вас есть знания, чтобы начать работу с React и TypeScript. Так что давай, раскрывай свой творческий потенциал и начинай создавать потрясающие приложения React с помощью TypeScript!