Typescript на русском языке. Стартовый гайд

Typescript на русском языке. Стартовый гайд

Эта статья покажет вам, как быстро разобраться с Typescript на русском языке, и мы обсудим плюсы и минусы использования TS. TypeScript является надмножеством JavaScript’a и стандарта TC39. С ТС, мы способны определять простые и сложные статические типы переменных в коде.

TypeScript – это просто JavaScript с добавлением типов для ваших переменных. Вы можете писать свой код как в современном ES2015+ используя TypeScript так и в предыдущей версии  ES5 и компилятор преобразует TypeScript (.ts) в JavaScript (.js)

Обратите внимание, что если вы используете require() или import/export для браузера, вам все равно придется использовать сборщик под браузер, например Webpack, Rollup или SystemJS.

Установка typescript

Сначала установите TypeScript с помощью npm:

npm install -g typescript

или yarn:

yarn global add typescript

После глобальной установки, у вас будет команда tsc, доступная в вашем терминале.

Typescript код

С помощью терминала создайте новый каталог ts-simple с помощью следующей команды:

mkdir ts-simple

сd (перейти) в этот каталог и создать index.ts. Внутри этого файла мы создадим функцию sayHello с именем аргумента, который имеет Тип string.

Typescript на русском языке

Теперь используя команду tsc компилируем его в index.ts:

tsc index.ts

Это создаст index.js, который удалит ввод из параметра sayHellofunction, а также преобразует файл в код ES5. Полученный JS-файл можно безопасно запускать в браузере или в Node. Ваш файл JavaScript будет выглядеть следующим образом:

IMAGE_1IMAGE_1Typescript на русском языке

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

node index.js
// "Hello, gitconnected!"

Ошибки Компиляции Typescript

Одним из преимуществ TypeScript является то, что он может автоматически ловить ошибки в типизации в вашем коде. Например, представьте себе в примере выше, мы хотим вызвать функцию .trim () в строке, в которую мы проходим. Если мы передадим переменную любого другого типа, это может привести к тому, что наш код выкинет ошибку в продакшене, а не в IDE. Давайте рассмотрим наш обновленный пример, неправильно передав массив функции:

IMAGE_2IMAGE_2Typescript на русском языке

Это приведет к следующей ошибке TypeScript при запуске tsc index.ts:

IMAGE_3Typescript на русском языке

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

IMAGE_4Typescript на русском языке

Дополнительные TypeScript расширения файлов

В дополнении к.ts файлам, вы также можете использовать.d.ts файлы, добавляя типы к уже существующим библиотекам Javascript, или .tsx файлы для написания на JSX синтаксисе в TypeScript для React приложений.

Преимущества TypeScript

  • Отлавливать ошибки во время написания кода, а не на live стенде. Типизация позволяет нам распознавать проблемы с типами, прежде чем что-то пойдет не так.
  • Технология IntelliSense и “автокомплит” кода. TypeScript поддерживается большинством основных IDE и текстовых редакторов, включая VS Code и Atom. Они предлагают мощные интеграции TypeScript, которые “автокомплитить” код, указывают аргументы функции без необходимости смотреть на источник и обеспечивают встроенное распознавание ошибок.
  • Улучшена читаемость кода. Структура, предоставляемая TS, упрощает читаемость нового кода при наличии строго типизированных переменных, функций и объектов. Он удаляет процесс “угадывания” на тему: какой тип у этих данных?
  • Писать на ES2015+. Компилятор TypeScript обрабатывает весь современный JavaScript и может компилироваться обратно в предыдущие версии JS для совместимости.
  • Опциональная статическая типизация. TypeScript не требует, чтобы все было статически типизировано, поэтому вы можете постепенно прописывать типы в проекте.
  • Отличная экосистема. TypeScript существует с 2012 года, и за прошедшее время ему удалось развить сильную экосистему. Многие пакеты с открытым исходным кодом изначально предоставляют типы TypeScript, что делает интеграцию еще проще.
  • Увеличение возможностей для карьерного роста. TypeScript быстро развивается, и он был интегрирован многими крупными технологическими компаниями, включая Google и Microsoft. Понимание TypeScript повышает вашу конкурентоспособность при поиске работы.
  • Бонус: нет необходимости в PropTypes при использовании TypeScript с React. Если Вы используете TypeScript, вам больше не нужно управлять PropTypes для React, что позволяет быстрее перехватывать ошибки и иметь более тесную связь props с типами, используемыми в вашем коде.

Недостатки TypeScript

  • Требуется больше времени на написание нового кода. Требуя больше кода, он может замедлить скорость разработки новых функций, и такой подход подойдет не для каждой компании/стартапа.
  • Еще одна библиотека, за которой придется следить. Если вы хотите оставаться в курсе событий с TS, это потребует некоторого рефакторинга по мере выхода новых версий.
  • Кривая обучения для инженеров JavaScript. TypeScript потребует дополнительное время на изучение для программистов, которые ранее работали только с JS.
  • Сложные типы может быть сложно понять. Если вы интегрируете TypeScript в существующую базу кода, вы можете столкнуться с проблемой правильного ввода и обработки сложных структур данных, которые “просто работали”, когда это был только JS.
  • Более подробный код. Хотя структура в конечном счете полезна, компромисс заключается в том, что вы будете использовать гораздо больше символов для записи такого же количества кода по сравнению с JavaScript.
  • Вам все еще нужен bundler (ie. Webpack, SystemJS и т. д.) для некоторых синтаксисов, таких как import / export для модулей ES2015.

перевод статьи: https://levelup.gitconnected.com/typescript-quick-start-guide-7257c2b71538

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *