Typescript для чего используется
TypeScript. Что, зачем и как?
Feb 21 · 8 min read
Те из вас, кто занимается разработкой на JavaScript, наверняка так или иначе слышали о TypeScript. Если при этом вы не решались попробовать освоить этот язык из-за неуверенности в его эффективности по сравнению с привычным JS, то сегодня самое время развеять эти сомнения.
Данная статья послужит ознакомительным, но в то же время разносторонним руководством к TypeScript, которое пригодится на первых этапах любому JS-разработчику.
Что такое TS, как работает его система типов, и чем он может пригодиться вам в последующих проектах? К концу статьи мы с вами на все эти вопросы ответим.
Примечание : у меня уже выработалось к этому языку особое отношение, и, честно сказать, я уже предпочитаю вести разработку исключительно на нем, а не на JS.
Что такое TypeScript?
Этот язык можно рассматривать как надмножество JavaScript.
Что это значит?
Несмотря на то, что изначально мы пишем код на TypeScript, его нельзя выполнять непосредственно в браузере, как JS. Вместо этого итоговый код проходит через дополнительный шаг компиляции, в ходе которого преобразуется в распознаваемый браузером JS-эквивалент. Этот процесс еще называют транспиляция.
Так что, даже когда мы программируем на TS, конечная программа, выполняющаяся в браузере, будет в JS.
Зачем тогда вообще использовать TypeScript?
Несмотря на то, что этот язык не предоставляет дополнительной функциональности в среде выполнения, он предлагает ряд возможностей, помогающих разработчикам писать более надежный и легче обслуживаемый код, чем в случае с чистым JS.
Как именно TypeScript это делает?
Как и предполагает его имя, он добавляет к JS систему типов. Если в JavaScript тип переменной присваивается динамически, то в TS нам приходится предопределять ее тип сразу в момент объявления.
Если мы говорим о JavaScript, то здесь можно сначала присвоить переменной целочисленное значение, а затем переназначить его на строковое.
По сути, это и отличает TS от JS. В нем используются типы, что позволяет нам избежать в коде глупых ошибок.
Как именно TypeScript улучшает JavaScript
Недостаток типизации нельзя однозначно назвать минусом JavaScript, но это дает программистам слишком большую свободу, что неизбежно ведет к написанию кода с ошибками.
TypeScript легко решает эту проблему путем определения типа переменной при ее объявлении, не давая в дальнейшем присвоить ее значению другого типа.
Если к этой переменной в последствии обратится другой разработчик, то он сможет быть уверен, что ее значение является числом, как и предполагает имя.
Опять же в TS есть для этого решение.
Использование TS избавит вас от сотни небрежных ошибок в коде, которые иной раз оказываются настолько глупы, что хочется рвать на голове волосы:) Кроме того, ваш код станет лучше самодокументирован и проще в обслуживании.
Если вам не хватало вариантов автоподстановок для JS-кода в IDE, то тем более стоит познакомиться с TS. Наличие типов дает этому языку возможность предлагать в IDE более точные подстановки.
Использование типов в TypeScript
Базовые типы
В TS есть ряд предопределенных типов, к числу которых относятся число, строка, логический тип и массив.
Полный список можно найти в документации TypeScript (англ.).
Вот несколько примеров:
Также не рекомендуется частить с типами объединения. Если же иначе никак, то лучше ограничивать возможные типы до минимума.
Объявление пользовательских типов
Помните, как я использовал тип Person в примере ранее? Но Person не относится к базовым типам TS. Я создал этот тип по своей необходимости, чтобы задействовать его как тип параметра, принимаемого заданной функцией.
Для определения основной структуры нового вводимого в приложение типа используются интерфейсы.
В интерфейсе также можно определять необязательные поля.
В последствии при определении другого типа можно использовать в качестве типа поля пользовательский тип.
Расширение интерфейсов
В TS можно реализовать наследование свойств от другого типа, расширив его интерфейс.
Типы параметров функций и возвращаемые типы
По аналогии с типами переменных можно определять типы для параметров функций и возвращаемых значений. В случае параметра тип объявляется рядом с его именем, в случае же возвращаемого значения тип определяется сразу перед фигурными скобками.
Вы также гарантируете, что поле sold в любом передаваемом объекте не будет undefined или null. Кроме того, это исключает ряд сценариев, в которых при выполнении могла возникнуть ошибка. Если бы мы в этом случае использовали JS, то для предотвращения подобных ошибок пришлось бы написать больше кода.
Как и в случае переменных, типы возвращаемых значений и параметров можно объявлять как объединения.
Когда вы объявляете принимаемый параметр или возвращаемое значение, объекты типов, расширяющих исходный интерфейс, также принимаются в качестве аргумента или возвращаемого значения.
Обобщения
В TS можно определять обобщенные переменные также легко, как и все, о чем было сказано выше. При объявлении обобщенной функции вы можете использовать ее для обработки данных, принадлежащих любому встроенному или пользовательскому типу.
А если использовать вместо обобщений тип ‘any’?
Псевдонимы типов
Когда конкретное поле, которое нужно задействовать в приложении, может принадлежать к одному из нескольких типов, есть возможность определить его тип как объединение этих отдельных типов.
Теперь не придется прописывать длинное объединение типов. К тому же, если в будущем понадобится внести изменения в возвращаемый тип функции, то теперь потребуется изменить только одну строку кода.
Преобразование типов
Когда тип определяется через расширение интерфейса, возникающая между ними связь позволяет взаимно преобразовывать определенные в них объекты.
Заключение
Надеюсь, эта статья рассеяла ваши сомнения по поводу использования TS для фронтенд разработки. Поскольку большинство возможностей TS повторяют JS, вы сможете освоить этот язык очень быстро, получив ощутимую отдачу уже в ближайших проектах.
Уверен, что вскоре вы наверняка станете JS-разработчиком, который просто не мыслит жизни без TypeScript, каким и стал я.
TypeScript
TypeScript — язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.
Разработчиком языка TypeScript является Андерс Хейлсберг (англ. Anders Hejlsberg), создавший ранее Turbo Pascal, Delphi и C#.
TypeScript является обратно совместимым с JavaScript и компилируется в последний. Фактически, после компиляции программу на TypeScript можно выполнять в любом современном браузере или использовать совместно с серверной платформой Node.js. Код экспериментального компилятора, транслирующего TypeScript в JavaScript, распространяется под лицензией Apache. Его разработка ведётся в публичном репозитории через сервис GitHub.
TypeScript отличается от JavaScript возможностью явного статического назначения типов, поддержкой использования полноценных классов (как в традиционных объектно-ориентированных языках).
tsconfig. json представляет собой стандартный файл в формате json, который содержит ряд секций. Например:
Таблица типов в Typescript
TypeScript является строго типизированным языком, и каждая переменная и константа в нем имеет определенный тип. При этом в отличие от javascript мы не можем динамически изменить ранее указанный тип переменной.
В TypeScript имеются следующие базовые типы:
Type assertion
Type assertion представляет модель преобразования значения переменной к определенному типу. Обычно в некоторых ситуациях одна переменная может представлять какой-то широкий тип, например, any, который по факту допускает значения различных типов. Однако при этом нам надо использовать переменную как значение строго определенного типа. И в этом случае мы можем привести к этому типу.
Есть две формы приведения. Первая форма заключается в использовании угловых скобок:
Вторая форма заключается в применении оператора as:
Jenerics
TypeScript является строго типизированным языком, однако иногда надо построить функционал так, чтобы он мог использовать данные любых типов. В некоторых случаях мы могли бы использовать тип any:
Однако в этом случае мы не можем использовать результат функции как объект того типа, который передан в функцию. Для нас это тип any. Если бы вместо числа 5 в функцию передавался бы объект какого-нибудь класса, и нам потом надо было бы использовать этот объект, например, вызывать у него функции, то это было бы проблематично. И чтобы конкретизировать возвращаемый тип, мы можем использовать обобщения:
Utility Types
Typescript поставляет объекты при помощи которых можно легко проводить трансформацию типов, например:
Requared — создаёт тип, в котором все поля обязательные
Readonly — все поля не могут быть изменены
ReturnType — Создает тип, состоящий из типа, возвращаемого функцией Type.
Вводный курс по TypeScript
Авторизуйтесь
Вводный курс по TypeScript
TypeScript — это расширенная версия JavaScript, главной целью которого является упрощение разработки крупных JS-приложений. Этот язык добавляет много новых принципов — классы, дженерики, интерфейсы, статические типы, что позволяет разработчикам использовать разные инструменты, такие как статический анализатор или рефакторинг кода.
Стоит ли использовать TypeScript?
В первую очередь возникает вопрос: а какие преимущества у этого языка?
В каких случаях стоит использовать TypeScript?
Хоть выше были приведены достаточные аргументы к использованию этого языка, TypeScript не является универсальным решением. В каких же случаях лучше всего подходит этот язык?
Установка TypeScript
Установить TypeScript совсем не сложно — достаточно загрузить его через пакетный менеджер npm и создать TypeScript-файл:
После его установки можно сразу перейти к рассмотрению возможностей этого языка и его синтаксиса.
Типы переменных
Number
Все числовые переменные в TypeScript существуют в виде числа с плавающей запятой. Числовой тип получают даже двоичные и шестнадцатеричные числа:
String
Как и другие языки, TypeScript использует тип String для хранения текстовой информации:
Можно создавать и многострочные переменные, а также в строки можно вставлять выражения, если выделить строку символами « :
Boolean
Куда же без одного из основных типов данных:
Присвоение типов
Одиночный тип переменной
Простой пример, где присваивается значение переменной типа String :
Такой способ действителен для всех типов данных.
Мультитип переменной
В коде выше переменной назначается два типа: строчный и численный. Теперь переменной можно присваивать как текстовые данные, так и числовые.
Проверка типов
Ниже будут описаны два основных (на деле их существует больше) способа проверки типа переменной.
Typeof
Команда typeof работает только с базовыми типами данных. Это означает, что эта команда может определить только типы, описанные выше.
Instanceof
Тип Assertions
Иногда приходится преобразовывать (кастовать) переменную одного типа в другой тип. Особенно часто это случается, когда переменную типа any (или другого произвольного типа) нужно передать в функцию, которая принимается аргумент определённого типа.
Существует много решений этой задачи, но ниже будут описано два самых популярных из них.
Ключевое слово as
Чтобы кастовать переменную, нужно после оператора as написать тип, в который переводится переменная.
Оператор <>
Этот код работает идентично предыдущему — разница только синтаксическая.
Как изучить TypeScript
За последние несколько лет TypeScript стал всё более распространённым языком, используемым разработчиками. Сообвественно у многих возникает вопрос, как изучить TypeScript?
TypeScript, созданный Microsoft в 2012 году, представляет собой типизированный супернабор JavaScript, который позволяет писать масштабируемые и эффективные веб-приложения. Разработчики часто говорят о том, что TypeScript позволяет «писать JavaScript так, как вы хотите». Это относится к тому, как язык даёт вам больше контроля над вашими программами.
В этом руководстве мы обсудим лучший способ изучить TypeScript. Мы дадим вам несколько советов, как улучшить свои навыки TypeScript.
Что такое JavaScript?
Прежде чем обсуждать TypeScript, давайте освежим наши воспоминания о другом языке программирования: JavaScript.
JavaScript — это язык сценариев, который позволяет создавать динамические веб-сайты. Вы можете добавлять на сайты такие функции, как анимированные изображения, интерактивные кнопки и компоненты веб-страницы, используя JavaScript. Эти элементы меняются, когда пользователь взаимодействует с ними.
Каждый раз, когда вы видите веб-страницу, которая не только отображает текст, JavaScript каким-то образом участвует.
Что такое TypeScript?
TypeScript — это типизированный супернабор языка программирования JavaScript с открытым исходным кодом. TypeScript был создан Microsoft в 2012 году, чтобы упростить разработчикам создание больших масштабируемых приложений. Он широко используется такими компаниями, как Slack, Asana и Microsoft.
Язык TypeScript использует тот же синтаксис и семантику, что и язык JavaScript. Есть несколько отличий, которые упрощают написание масштабируемого кода. В результате вы можете использовать существующий код JavaScript для запуска приложения TypeScript, а затем вызывать свой код TypeScript из приложения JavaScript.
Набор функций TypeScript предлагает поддержку всех последних функций JavaScript. Это означает, что при использовании TypeScript вы не упускаете других функций, которые были добавлены в JavaScript.
В то время как JavaScript — это динамический язык сценариев, TypeScript — это статический язык сценариев, который лежит поверх кода JavaScript. TypeScript не заменяет JavaScript. Это дополнительная технология, используемая вместе с JavaScript, особенно когда вы хотите создавать высокомасштабируемые веб-приложения.
Вот основные различия между JavaScript и TypeScript:
Для чего используется TypeScript?
TypeScript — это современная среда веб-разработки. Он расширяет JavaScript определениями статических типов. Эти определения упрощают описание структуры объекта, что улучшает читаемость кода.
Весь код JavaScript может быть кодом TypeScript. Это потому, что TypeScript распространяется только на JavaScript. Он не заменяет рамки. При компиляции код TypeScript преобразуется в код JavaScript.
Разработчику не нужно полностью изменять своё приложение для поддержки TypeScript. В любой момент TypeScript можно добавить в клиентское или серверное приложение.
Поскольку TypeScript основан на JavaScript, любой переход будет включать добавление кода TypeScript, а не удаление кода JavaScript.
Сколько времени нужно, чтобы изучить TypeScript?
На изучение основ TypeScript уходит около месяца, при условии, что вы занимаетесь не менее одного часа в день. Ожидайте, что потратите как минимум шесть месяцев на изучение TypeScript, прежде чем вы разовьёте навыки, необходимые для применения его в условиях профессионального развития.
Поскольку TypeScript основан на JavaScript, многие термины, которые вы слышите, будут вам знакомы. Это ускорит процесс обучения. Но TypeScript — это собственная технология. Итак, будет много концепций, которые вам нужно будет изучить с нуля.
Время, необходимое вам для изучения TypeScript, зависит от того, сколько времени вы уделяете изучению. Если вы учитесь полный рабочий день, вы сможете выучить TypeScript быстрее, чем тот, кто учится только неполный рабочий день.
Сложно ли выучить TypeScript?
Изучение TypeScript немного сложнее, чем изучение JavaScript. Это связано с тем, что TypeScript расширяет JavaScript, и поэтому вам нужно сначала хорошо понять, как работает JavaScript. Но после некоторой практики и времени у вас не должно возникнуть проблем с изучением TypeScript.
TypeScript имеет множество функций, которые не поддерживаются в JavaScript. К ним относятся декораторы, модификаторы доступа, перечисления, статическая типизация и интерфейсы. Ожидайте, что потратите некоторое время на изучение совершенно новых концепций, с которыми вы, возможно, никогда не сталкивались в веб-разработке.
Почему вы должны изучать TypeScript?
Хотя JavaScript отлично подходит для гибкости, во многих случаях он не так хорош для создания высокомасштабируемых веб-приложений. Изучив TypeScript, вы получите совершенно новый набор инструментов, которые сможете использовать для написания эффективно масштабируемых веб-приложений.
Многие веб-разработчики изучают TypeScript, потому что этот язык предлагает статическую типизацию. Статическая типизация может улучшить ваш опыт разработки, упростив написание читаемого кода. Например, такие инструменты, как TSLint и TSServer, позволяют улучшить стиль и эффективность вашего кода.
Это ещё не всё: TypeScript также является востребованным навыком на рынке труда. Согласно отчёту Hired о состоянии инженеров-программистов в 2020 году, TypeScript — четвёртый по популярности язык программирования в мире. TypeScript стоит за Go, Scala и Ruby. Изучение TypeScript должно повысить ваши шансы найти хорошую работу в сфере технологий.
Как быстро изучить TypeScript
Итак, вы решили изучить TypeScript. Отличный выбор. Но как вы можете быстро изучить TypeScript?
Чтобы ответить на этот вопрос, мы собираемся изучить основные темы, которые вам нужно изучить для эффективного кодирования на TypeScript. Затем мы обсудим, как узнать об этих темах. Давайте начнём!
Развивайте свои навыки
Первый шаг к изучению TypeScript — овладение основами. Заполните другие компоненты, составляющие язык TypeScript. Изучив основы, вы можете переходить к изучению более сложных аспектов TypeScript. Давайте разберём основные навыки, которые вам нужно знать для изучения TypeScript.
Изучите HTML, CSS и JavaScript
Поскольку TypeScript построен на основе JavaScript, вам необходимо научиться кодировать в HTML, CSS и JavaScript, прежде чем начать.
Во-первых, вы должны изучить основы HTML и CSS. Это два языка программирования, которые используются для определения структуры и стиля веб-страницы соответственно. После того как вы изучите эти технологии, вам нужно будет изучить основы JavaScript.
Для начала ознакомьтесь с нашими руководствами по изучению HTML и CSS:
Типы являются важным компонентом TypeScript, отсюда и название языка.
В TypeScript типы могут быть присвоены переменным при их объявлении. Это позволяет писать более надёжный и масштабируемый код, а также повышает удобочитаемость ваших программ.
Чтобы эффективно работать с TypeScript, вы должны понимать основные типы данных, используемые JavaScript. Вот основные темы, которые вам следует изучить:
Переменные и комментарии
Переменные используются для хранения значений в TypeScript. Например, переменная может хранить имя пользователя или дату его рождения.
Комментарии позволяют добавлять в код записи, которые не читаются браузером, но могут быть прочитаны разработчиками. Комментарии позволяют объяснить, как работает ваш код.
Поскольку переменные и комментарии TypeScript и JavaScript работают по-разному, вам следует подробно изучить обе эти темы. Вот несколько тем, связанных с переменными и комментариями, которые вам следует изучить:
Функции
TypeScript предлагает ряд улучшений традиционных функций JavaScript.
В TypeScript, например, вы можете объявить функцию так же, как в JavaScript. Но вы также можете использовать типы TypeScript в качестве аргументов функции.
Вам следует изучить два типа функций: выражения функций и объявления функций. Вам также следует ознакомиться с тем, как ключевое слово this работает в TypeScript, который также является производным от JavaScript.
Объектно-ориентированное программирование
TypeScript — это объектно-ориентированный язык программирования, в который добавлен ряд новых функций для улучшения объектно-ориентированных функций JavaScript. Например, вы можете создавать классы, используя ключевое слово «class» в TypeScript.
Вам следует ознакомиться со следующими темами, связанными с объектно-ориентированным программированием:
Интерфейсы
Одна из основных функций TypeScript — это интерфейс. Интерфейсы позволяют вам определять конкретную структуру для переменной. Вы должны знать, что может содержать интерфейс и как его определять.
Модули
Модули — это функция TypeScript, которая позволяет разделить код на множество небольших компонентов, которые можно использовать повторно. Это поможет вам сохранить ваш проект более организованным. Вы должны узнать об основном синтаксисе, используемом TypeScript для импорта и экспорта модулей в файлы.
Как изучить TypeScript онлайн
Существует огромное количество ресурсов, которые помогут вам изучить TypeScript. Это хорошо — чем больше ресурсов есть, тем больше вероятность того, что они точно соответствуют вашим потребностям. Однако выбор того, какие ресурсы использовать, может быть пугающим.
Первое, что вам следует сделать перед изучением TypeScript, — это спросить себя, как вам лучше всего учиться.
Вам нравятся онлайн-уроки или вы предпочитаете онлайн-курсы? Вы хотите работать над проектами в составе команды или вам комфортно учиться самому? Предварительно рассмотрев этот вопрос, вы сможете лучше понять типы материалов, которые вам следует искать.
Посетите семинар по программированию
Учебные курсы по кодированию — это короткие программы профессионального обучения, ориентированные на трудоустройство. В учебном лагере вы изучите все практические навыки программирования, необходимые для продолжения карьеры в сфере технологий.
Существуют десятки учебных лагерей по программированию, которые специализируются на веб-разработке, многие из которых изучают JavaScript и TypeScript в рамках своих учебных программ.
Создайте проект
Как только вы изучите основы TypeScript, вы будете готовы начать проект.
Проекты — это хороший способ учиться, потому что они позволяют вам применить полученные навыки. Имейте это в виду — если вы не примените свои навыки, вы быстро их забудете.
Для начала попробуйте построить несколько небольших проектов. Это поможет вам более комфортно работать с TypeScript. Создание небольших проектов снизит вероятность того, что вы откажетесь от проекта из-за того, что чувствуете себя перегруженным. Фактически, многие онлайн-курсы предлагают небольшие структурированные проекты как часть своей учебной программы.
Создав несколько небольших проектов, вы можете масштабировать свои усилия и работать над более крупным проектом.
Вы ищете идеи, что построить? Вот несколько предложений:
Как только вы начнёте работать над проектом, вы обнаружите, что продолжать писать код становится проще. Это потому, что у вас есть чёткая цель: завершить проект. Когда вы только начинаете изучать любую технологию кодирования, этот образ мышления невероятно ценен.
Практикуйте свои навыки TypeScript
Практика может и не привести к совершенству, но она определённо сделает вас лучшим программистом.
Кодирование — это навык, и, как и любой навык, вам нужно практиковаться. Невозможно стать хорошим программистом, просто следуя руководствам и читая документацию.
Практика так важна, потому что по мере написания кода вы столкнётесь с новыми проблемами и функциями, о которых раньше не задумывались.
Вся эта работа будет способствовать вашему пониманию TypeScript и программирования в более широком смысле.
Если можете, практикуйтесь каждый день. Если вы ищете несколько идей о том, как практиковать свои навыки, рассмотрите следующие занятия:
Если вы всё ещё ищете способы попрактиковаться, подумайте о запуске нового проекта или улучшении существующего. Чем больше вы практикуетесь, тем ближе вы будете к достижению своей цели — научиться программировать на TypeScript.
Присоединяйтесь к сообществу разработчиков
Поскольку TypeScript настолько популярен, существует невероятно активное сообщество разработчиков, которые знают, как писать код с использованием TypeScript.
Когда вы начинаете изучать TypeScript, вам следует попробовать вступить в одно или два сообщества разработчиков. Эти сообщества — это места, где разработчики рассказывают о своём обучении и отвечают на вопросы друг друга. Если вы не знаете, с чего начать, вот несколько сообществ, к которым вы можете присоединиться:
Начните вносить свой вклад как можно скорее, когда вы присоединитесь к одному из этих сообществ. Вы видите вопрос, на который можете ответить? Отправьте ответ. Как вы думаете, нужно прояснить вопрос? Просите ясности. Чем больше вы вносите свой вклад, тем лучшую репутацию вы приобретёте в сообществе. Это во многом поможет вам найти других замечательных разработчиков, с которыми можно поговорить.
Заключение
TypeScript — это язык программирования, позволяющий писать высокомасштабируемые веб-приложения. Этот язык представляет собой супернабор JavaScript и обеспечивает дополнительную статическую проверку типов.
Слоган TypeScript — «масштабируемый JavaScript». На то есть веская причина. TypeScript позволяет писать высокоэффективный код, который хорошо работает по мере роста вашего приложения.
Существует множество бесплатных онлайн-ресурсов TypeScript, которые вы можете использовать для освоения этой технологии. Во многом это связано с ростом спроса на разработчиков TypeScript.
Подводя итог, вот основные шаги, которые вы должны выполнить, чтобы быстро изучить TypeScript:
Если вы выполните эти шаги, вы станете экспертом по TypeScript! С приобретёнными навыками вы сможете начать писать более эффективные веб-приложения. Возможно, вы даже сможете применить полученные навыки, чтобы найти работу в сфере технологий.