Кодирование

Создать приложение React с помощью Typescript | Добавить Typescript в существующий проект React

Оглавление скрыть 1 Создание приложения React с помощью TypeScript 2 Введение в создание приложения React с помощью TypeScript 2.1...

Написано Ниль Патель · 6 min read >
TypeScript и Create-React-App

На сегодняшний день React является вирусной и одной из величайших интерфейсных библиотек; она стала основной библиотекой для многих разработчиков при разработке интерфейсных приложений.

Вы полюбите приложение create-react-app еще больше

Создание приложения React с помощью TypeScript

С другой стороны, Typescript — это статически типизированный язык программирования, который делает наш код JavaScript более предсказуемым. Одна из ключевых причин, по которой был изобретен Typescript, заключалась в том, чтобы помочь разработчикам не просто создавать вещи, но и разрабатывать продукты, поведение которых мы всегда можем предсказать.

Введение в создание приложения реагирования с помощью машинописного текста

Наши приложения React будут более предсказуемыми, если мы будем использовать Typescript для их создания, поскольку мы сможем обнаружить множество ошибок во время выполнения (во время компиляции).

Сегодня я возьму тебя с собой в это путешествие. Я сделаю все возможное, чтобы концепции были простыми для вас. Вам не обязательно писать код вместе со мной. Но если вам это удастся, это будет фантастика!

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

Этот пост не предназначен для использования в качестве руководства для начинающих по React или Typescript; скорее, он покажет нам, как использовать Typescript в приложениях React.

Компилятор TypeScript

Начав с файла App.tsx, давайте более подробно рассмотрим компоненты и тесты. Расширение файла, вероятно, первое, на что вы обратили внимание. Все файлы компонентов теперь имеют формат tsx вместо jsx, а файл setupTests.js переименован в setupTests.ts. Но почему?

Браузеры и Node в настоящее время не принимают TypeScript напрямую; они понимают только JavaScript, поэтому нам придется преобразовать наши сценарии TypeScript в сценарии JavaScript. Это задача, за которую отвечает компилятор TypeScript.

Различные расширения файлов, такие как указанные выше, используются, потому что компилятор должен знать, какие файлы компилировать, а какие файлы представляют собой чистый JavaScript.

Добавление TypeScript

Примечание: эта функция доступна с react-scripts@2.1.0 и выше.

  1. Установка. Чтобы начать новый проект Create React App с помощью Машинопись, вы можете запустить приведенную ниже команду.
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

Если вы ранее установили create-react-app по всему миру через npm install -g create-react-app, мы рекомендуем вам удалить пакет, используя npm uninstall -g create-react-app or yarn global remove create-react-app для обеспечения того, чтобы npx всегда использует последнюю версию.

Глобальные установки create-react-app больше не поддерживаются.

2. Добавьте Typescript в существующий проект React.

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

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

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Переименуйте любой файл в файл TypeScript (например, src/index.js в src/index.tsx) и не забудь перезапустить сервер!

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

После этого переименуйте все файлы, которые вы хотите использовать в качестве файлов TypeScript, в endin.tsx. Вместо App.js вы можете использовать App.tsx.
Вот здесь у вас могут возникнуть проблемы. Вы увидите, что практически все в вашем файле App.tsx отмечено красным. Это не идеально.

Если вы еще этого не сделали, импортируйте React из раздела «react» в начале файла.

При наведении курсора на любой подчеркнутый элемент в VSCode появляется сообщение «Невозможно использовать JSX, если не указан флаг '— jsx'». Вы можете выбрать опцию «Быстрое исправление» или исправить это вручную на этом этапе. Когда вы выберете «Быстрое исправление», вам будет предоставлена ​​возможность «Включить флаг jsx в вашем файле конфигурации». Загрузка займет секунду или две, а затем ошибки должны исчезнуть.

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

Создать машинописный текст приложения React Native (последняя версия)

Вам не обязательно создавать файл tsconfig.json; один будет создан для вас. Вы можете внести изменения в созданную конфигурацию TypeScript.

Руководство по TypeScript

Полное руководство по созданию машинописного текста приложения Create React Native с нуля

Работа в рамках любой структуры имеет два преимущества. Это улучшит ваши навыки разработчика и понимание работы, которую вы выполняете.
Это также позволяет вам оценить то, что эти платформы выполняют за кулисами, но мы часто упускаем из виду.
Я хотел углубиться в React, чтобы увидеть, как приложение работает «за кулисами», воспроизводя его локально.

Typescript — это строгий статически типизированный язык программирования, который повышает предсказуемость нашего кода JavaScript. Одна из ключевых причин, по которой был изобретен Typescript, заключалась в том, чтобы помочь разработчикам не просто создавать вещи, но и разрабатывать продукты, поведение которых мы всегда можем предсказать.

Вы можете использовать шаблоны для запуска нового приложения TypeScript. Добавьте — шаблон машинописного текста к команде создания, чтобы использовать наш шаблон TypeScript.

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

Он прекрасно компилируется без каких-либо специальных настроек или пакетов для загрузки. Все файлы, которые были бы .js файлы сейчас .ts or .tsx.

добавить машинописный текст в существующий проект реагирования

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

Сценарий создания приложения Yarn для реагирования

Если вы ранее установили create-react-app по всему миру через npm install -g create-react-app, мы рекомендуем вам удалить пакет, используя npm uninstall -g create-react-app or yarn global remove create-react-app для обеспечения того, чтобы npx всегда использует последнюю версию.

1. yarn create react app typescript
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript


2. how to install react with typescript
npx create-react-app my-app --template typescript

# or
yarn create react-app my-app --template typescript



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



4. create-react-app typescript
npx create-react-app my-app --template typescript
# or #
yarn create react-app my-app --template typescriptCopy



5. create react app ts
To create typescript version
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

Инициализируйте проект с помощью Yarn

Затем выполните следующую команду, чтобы создать проект npm (рекомендуется Yarn).

yarn init
or
npm init

Вот как выглядит выход пряжи

Как объявлять типы в приложениях React

Давайте создадим тип для нашего Все объект, внутри App.tsx файл поместит этот объект после импорта.

type ITodo = { 
  // Our todo should have the title and completed fields and the id field to 
  id: number;
  title: string;
  completed: boolean;
}

type ITodos = {
  todos: ITodo[], // Our Todos is an array of Todo
}

Типы событий в реакции

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

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

<button onClick={e => {console.log(e) }}>Add</button>
(parameter) e: React.MouseEvent<HTMLButtonElement, MouseEvent>

Объявление типов реквизита с использованием React.FC

const TodosComponent: React.FC<{
  todos: ITodos, 
  toggleTodos: (id: number) => void,
  deleteTodos: (id: number) => void
}> = ({todos, toggleTodos, deleteTodos}) => {
  const deleteTodo = (id: number) => {
    if (window.confirm(`Are you sure you want to delete todo?`)) {
      deleteTodos(id);
    }
  }
  return (
    <div className="section__todos">
    <h2>Todos</h2>
    {todos.todos.length ? <ul className="todos">
      {todos.todos.map(todo => (
        <li key={todo.id}>
          <span style={{textDecoration: todo.completed? 'line-through': 'none'}}>{todo.title}</span>
          <input 
            type="checkbox" 
            checked={todo.completed} 
            onChange={() => toggleTodos(todo.id)} />
          <button onClick={() => {deleteTodo(todo.id)}}>X</button>
        </li>
      ))}
    </ul>: <div>No Todo has been created</div>}
  </div>
  );
};

Ввод переменных в TypeScript

Давайте посмотрим на следующий пример:

let helloWorld = "Hello World";

Поскольку значение переменной helloWorld является строкой, теперь оно имеет тип string, и вы можете манипулировать им так же, как обычно со строкой. Однако если тип переменной изменится в будущем, тип переменной также изменится.

Вот как работает TypeScript: он присваивает тип переменной на основе ее значения на момент объявления, поэтому одна и та же строка кода будет работать на обоих языках. Различие основано на том, что происходит, когда вы хотите присвоить новое значение переменной другого типа.

Мы уже видели, как это сделать с помощью JavaScript, но что, если мы попробуем то же самое с TypeScript?

Документация

Вот некоторые из лучших мест, где можно найти актуальную информацию о React и TypeScript:

Создайте eslint для реагирования на приложение в 2022 году

Предварительные условия для создания eslint машинописи приложения реагирования

Примечание. Вам необходимо установить версию Node >= 10. Итак, если у вас его нет, перейдите на сайт NodeJS, загрузите и установите его на свой локальный компьютер. (https://nodejs.org/en/)

Шаг 1. Создайте проект React с помощью Typescript

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

Шаг 2. Удалите предустановленную конфигурацию ESLint.

«эслинтконфиг»: {
«расширяется»:[
«реагировать-приложение»,
«реагировать-приложение/шутка»
]
}

Шаг 3. Установите пакет ESLint

npm install eslint --save-dev

Прочтите следующие шаги здесь

Оставьте комментарий

Translate »