Реагируйте с помощью TypeScript или JavaScript: что лучше?

Что такое TypeScript?

TypeScript с открытым исходным кодом предоставляет компилятор, который преобразует код TypeScript в код JavaScript. Этот язык с открытым исходным кодом и кросс-браузерный. Предположим, что в языке js почти нет логических изъянов. В этом случае вы можете использовать TypeScript, переименовав свои сценарии .js в файлы .ts и начав получать соответствующий код TypeScript.

Язык JavaScript будет специализированной версией TypeScript. Андерс Хейлсберг, технический сотрудник Microsoft, представил и создал его в 2012 году. Поскольку JavaScript стал более популярным, код JS стал более громоздким и трудным для понимания, поэтому был разработан Typescript. Когда программисты начали использовать JavaScript для серверных технологий, это стало яснее.

Что такое JavaScript?

Каждый раз, когда пользовательская страница делает гораздо больше, чем просто сидит там и отображает статические данные для вашего просмотра — демонстрирует более качественный контент, визуализацию, мультяшную 2D/3D-графику, просматривает проигрыватели видеозаписи и т. д. — вы можете поспорить, что JavaScript возможно причастен. JavaScript — это язык сценариев или кодирования, который позволяет включать расширенные структуры на веб-страницы. Это третий ярус торта, состоящий из стандартных веб-технологий, первых двух (HTML и CSS).

React лучше с JavaScript или TypeScript?

На первый взгляд кажется, что нет никакой разницы между кодом из стандартного React TypeScript и JavaScript. Это вполне ожидаемо, учитывая, что TypeScript — это набор кодов и предок JavaScript. Различия между JavaScript и TypeScript не сильно изменились за последние несколько лет. Вы готовы пойти, если вы знаете их.

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

Широко используется JavaScript. Они анализируют его и обнаруживают, что язык нестабилен и непредсказуем. При необходимости JS-фреймворки можно перевести на TypeScript. Требуется рабочая сила для конвертации популярных JS-систем в TS.

Файлы .d.ts должны быть задокументированы и содержать все возвращаемые методологии для каждой переносимой библиотеки. Портирование jQuery потребовало дополнительных усилий. Возможно, это не так сложно. TypeScript поддерживается IDEA, WebStorm, Expressive, Particle и другими.

Реагировать на код и тип файла в TypeScript и JavaScript

На первый взгляд кажется, что нет никакой разницы между кодом из стандартного React TypeScript и JavaScript.

Это вполне ожидаемо, учитывая, что TypeScript — это набор кодов и предок JavaScript. Это означает, что любое программирование на основе JavaScript также сможет выполнять файлы TypeScript. Точно так же не все языки SASS могут быть законным кодом CSS; эта идея гласит, что любой CSS приемлем в коде SASS.

Однако компьютер не может выполнять язык TypeScript, поэтому большинство ваших приложений TypeScript будут иметь tsconfig.json. Этот файл конфигурации изменит поведение компилятора TypeScript и преобразует код TypeScript в JavaScript, который затем сможет понять и использовать браузер.

Основное различие между TypeScript и приложением JavaScript React заключается в имени файла первого. Например, TSX, а последний — .js.

Как создать проект React в Typescript?

Вы можете создать новый проект TypeScript React с помощью библиотеки create-react-app в вашей среде и использовать эту команду:

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

или же,

 yarn create react-app my-app --template Typescript

Если у вас есть существующий проект JavaScript React, который вы хотите преобразовать в TypeScript, вы можете запустить эту команду.

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

или же,

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

После запуска команды вы можете переименовать все свои файлы .js в .tsx, перезапустить сервер и приступить к работе.

1. Ловец ошибок

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

2. Помощник IntelliSense в IDE

«Компоненты списка», «Информация о параметрах», «Быстрая информация» и «Все слово» — это лишь некоторые из функций, предлагаемых IntelliSense, инструментом завершения кода. Всего несколькими нажатиями клавиш вы можете добавлять вызовы атрибутов и методов, вести учет аргументов, которые вы вводите, и узнавать немного об используемом программном обеспечении благодаря этим возможностям.

3. Система типов

Вы можете задаться вопросом, как строго типизировать ваши переменные или объекты, чтобы код вашего проекта React TypeScript мог включить Bug Catcher и IntelliSense. Чтобы обеспечить процесс ввода TypeScript для вас в проекте Reactive TypeScript, необходимо помнить о трех вещах.

1. Объявите взаимодействие для объектов/массивов и подтип для переменных примитивного типа.

Чтобы сделать поле в объекте необязательным, вы можете использовать оператор. Это не позволит TypeScript беспокоить вас, когда он проверяет ваш код.

2. При необходимости объявляйте тип функционального компонента

3. Вы можете использовать это бесплатно. Инициализация свойства со значением позволяет TypeScript сразу выбрать качество за вас.

5 причин использовать TypeScript с React

За последние пару лет TypeScript пользуется большим спросом среди фронтенд-программистов. Несколько факторов, способствующих его успеху, — улучшенная возможность повторного использования, единообразие кода и будущая поддержка платформы. Кроме того, React оставался беспристрастным, предлагая программистам возможность использовать TypeScript или JavaScript. Напротив, многие другие платформы и библиотеки используют TypeScript по умолчанию.

В этом посте мы рассмотрим 5 убедительных аргументов в пользу использования TypeScript для приложений React.

1. Компоненты просты для чтения и понимания

Типы реквизита легко определить с помощью TypeScript, что делает код более точным и понятным. Кроме того, будет включена поддержка IntelliSense и проверка статического типа.

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

2. Улучшенная поддержка JSX

Еще одно преимущество TypeScript + React — улучшенный IntelliSense и синтез кода для JSX. Bit упрощает распространение, описание и повторное использование независимых компонентов в проектах. Используйте его для создания масштабируемых приложений, сохраняйте согласованный дизайн, продвигайте повторное использование кода, сотрудничайте с другими и ускоряйте доставку.

3. Поддержка TypeScript по умолчанию в общих библиотеках

Предположим, вы использовали TypeScript несколько лет назад. В этом случае вы, возможно, помните, как утомительно было искать концепции, появившиеся для сторонних библиотек. Но сейчас TypeScript быстро набирает популярность; наиболее широко используемые библиотеки поддерживают определения типов. Кроме того, определения типов поддерживаются архитектурой библиотеки React, поэтому вам больше не нужно об этом беспокоиться.

4. Поэтапная реализация текущих проектов

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

5. Преимущества IntelliSense и статической проверки типов в целом

а. Тестирование статических типов

Ошибки легче обнаружить раньше благодаря статической проверке типов. Упомянутый ранее пример правильно определяет, что в качестве входных данных для метода get details требуется строка, а не число.

б. Улучшенный IntelliSense

Вы можете быть уверены, что IntelliSense остается на 100 % правильным при объединении статической проверки данных TypeScript и IntelliSense.

в. Улучшение рефакторинга

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

д. Меньше ошибок, которые не определены

Поскольку интерпретатор TypeScript дополнительно идентифицирует неопределенные ошибки во время транспиляции, вероятность их возникновения при выполнении снижается.

е. Улучшенная читаемость и обслуживание

Кодовая база была бы значительно более понятной и поддерживалась бы с использованием определений типов. Вы можете придерживаться принципов объектно-ориентированной разработки и использовать такие структуры, как интерфейсы, для организации кода таким образом, чтобы свести к минимуму связанность.

ф. Проблемы с использованием TypeScript решаются.

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

грамм. Кривая для обучения

Начало использования TypeScript может быть сложным из-за крутой кривой обучения, особенно если ваши сотрудники имеют опыт работы только с базовым JavaScript. Наилучший способ действий в этой ситуации — принять описанную выше прогрессивную адаптацию.

Но если группа уже имеет опыт работы с языками с динамической типизацией, такими как Java или C#, понять машинописный текст не так уж сложно.

час Определения типов отсутствуют в сторонней библиотеке.

Это необычное обстоятельство, учитывая растущую популярность TypeScript. Однако официальная документация TypeScript предлагает полезные советы, если вы столкнетесь с библиотекой, в которой отсутствуют определения. Процитируйте это.

я. Расчетный период

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

Подведение итогов

Это связь между кратковременным страданием и долговременным вознаграждением. Когда вы начинаете проект TypeScript, вам может показаться очень сложным и трудоемким установить все инструменты разработки. Тем не менее, по мере роста вашего приложения вы обнаружите, что эти шаблоны оказывают огромную помощь, ускоряют работу и снижают вероятность ошибок. Мы надеемся, что эта статья захватила вас и помогла осознать ценность использования TypeScript в вашем проекте React.