TypeScript и Create-React-App
Быстрая инструкция!
Вы хотите использовать TypeScript в React, но не знаете, с чего начать. Вы пришли в нужное место! (На этот раз мы не будем говорить о синтаксисе TS — просто приступим к работе.)
Новое приложение с нуля
Если вы создаете новое приложение и используете приложение create-react-app, отлично подойдет документация Create React App:
Вы можете запустить новое приложение TypeScript, используя шаблоны. Чтобы использовать предоставленный нами шаблон TypeScript, добавьте --template typescriptего к команде создания.
npx create-react-app my-app --template typescript
Если вы оказались в ситуации, когда вы уже начали работу над проектом и хотите перейти на TypeScript, не беспокойтесь! Для этого тоже есть решение.
Преобразование существующего приложения в TypeScript
В терминале перейдите в каталог вашего приложения, куда вы хотите установить TypeScript:
npm install --save typescript @types/node @types/react @types/react-
dom @types/jest
Здесь вы можете столкнуться с проблемами. Если вы откроете свой App.tsxфайл, то увидите, что почти все подчеркнуто красным. Не хорошо.
Во- первых, вам нужно сделать import React from 'react'это в верхней части файла, если вы еще этого не сделали.
Если вы находитесь в VSCode и наводите курсор на любой подчеркнутый элемент, вы получите сообщение «Невозможно использовать JSX, если не указан флаг '-jsx'». На этом этапе вы можете либо нажать «Быстрое исправление», либо исправить это вручную. Если вы нажмете «Быстрое исправление», вы получите опцию «Включить флаг '-jsx' в вашем файле конфигурации». После того, как вы нажмете на нее, загрузка займет секунду или две, а затем ошибки должны исчезнуть.
Если вы хотите сделать это вручную, зайдите в свой tsconfig.jsonфайл, найдите ключ "jsx"и измените значение на "react"вместо react-jsx.
Если вы по-прежнему получаете сообщение об ошибке в своем tsconfig.jsфайле, возможно, вы используете разные версии TypeScript. Введите cmd + shift + p, чтобы открыть быстрые настройки в VSCode, и найдите «TypeScript: выберите версию TypeScript…». Нажмите на нее и выберите «Использовать версию рабочей области».
Надеюсь, теперь у вас нет ошибок, ваш код компилируется, и вы готовы запустить фантастическое приложение!
хотелось бы подключиться! Найдите меня на LinkedIn , GitHub , Twitter .
Полезные ресурсы
Suggested posts
Как избежать разрушительных последствий инсульта: уроки семейного опыта.
Введение Инсульт — это неотложная медицинская помощь, которая может случиться с кем угодно в любое время. Это происходит, когда приток крови к части мозга нарушается, что приводит к внезапной потере функции мозга.
Jest — мощный фреймворк для тестирования JavaScript
Тестирование — неотъемлемая часть разработки программного обеспечения. Это гарантирует, что код надежен, функционирует должным образом и снижает вероятность ошибок.
Related posts
Первая детская книга о кайфе
(Предупреждение — это сатира, предназначенная для радостной подрывной деятельности — определенно не для детей) Вы видели, как ваши мама и папа прячутся на кухне и курят эти вонючие сигареты. Они говорят вам.
Почему некоторые фрилансеры притворяются своей жизнью
Недавно я был в Linkedin, крупнейшей в мире профессиональной социальной сети, и нашел посты дизайнеров-фрилансеров, за которыми я следил и которые привлекли мое внимание. Все они публиковали фотографии из самолетов, на пляже со своими ноутбуками, из бассейнов и офисов с потрясающими видами.
Обучение на рабочей неделе важнее, чем вы думаете
Мы часто обнаруживаем, что изо всех сил пытаемся реализовать то, что, как мы знаем, полезно для нас. От того, чтобы сказать значимому другому, что мы любим его, до того, чтобы помнить, что нужно говорить как пират, всегда будут те, кто утверждает, что день, неделя или месяц событий не нужны, потому что они уже делают эти вещи.
