тайп скрипт для чего
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, необходимые для разработки Angular-приложений
TypeScript — это надмножество JavaScript, то есть, любой код на JS является правильным с точки зрения TypeScript. Однако, TypeScript обладает некоторыми дополнительными возможностями, которые не входят в JavaScript. Среди них — строгая типизация (то есть, указание типа переменной при её объявлении, что позволяет сделать поведение кода более предсказуемым и упростить отладку), механизмы объектно-ориентированного программирования и многое другое. Браузеры не поддерживают TypeScript напрямую, поэтому код на TS надо транспилировать в JavaScript.
TypeScript применяется для разработки веб-приложений с использованием популярного фреймворка Angular. В этом материале мы рассмотрим основы TypeScript, необходимые для того, чтобы приступить к освоению Angular и к работе с ним.
Предварительная подготовка
Прежде чем пользоваться TypeScript, его надо установить:
Теперь можно переходить к изучению возможностей языка. Откройте текстовый редактор и создайте новый файл. Поместите в него следующий код:
Сохраните его как main.ts и, перейдя в терминале туда, где его сохранили, выполните следующую команду:
Обратите внимание на то, что вам не нужно выполнять команду tsc при сборке Angular-приложения, так как инструмент ng serve подготовит код к выполнению автоматически.
Типы данных в TypeScript
TypeScript поддерживает различные типы данных. Среди них можно отметить следующие:
Стрелочные функции
В JavaScript функции объявляют так:
Интерфейсы
Не рекомендуется писать функции, которым надо передавать очень много параметров. Например, это может выглядеть так:
Избежать таких конструкций можно, включив параметры в объект и передав функции единственный объект. Тут нам помогут интерфейсы. Этот механизм есть в TypeScript:
Классы
Стоит выработать у себя привычку группировать связанные переменные (свойства) и функции (методы) в единую конструкцию, которая в программировании называется классом. Для того, чтобы опробовать это на практике, создайте файл myPoints.ts и поместите в него следующий код:
Доступ к свойствам и методам классов
Мы сгруппировали связанные переменные и методы в единый класс. Теперь надо разобраться с тем, как с ними работать. Для этого нужно создать экземпляр класса:
Файл myPoints.ts можно транспилировать и запустить то, что получилось:
Обратите внимание на то, что прежде чем назначать свойствам класса значения, нужно создать его экземпляр. А есть ли способ задания значений свойств в ходе создания экземпляра класса? Такой способ есть и существует он благодаря конструкторам.
Конструкторы
Конструктор — это метод, который вызывается автоматически при создании экземпляров класса. Конструктор позволяет задавать значения свойств. Вот пример работы с экземпляром класса, в котором возможности конструкторов не применяются:
То же самое, с использованием конструктора, можно переписать так:
Однако, для того, чтобы вышеприведённый пример заработал, понадобится внести изменения в класс, задав его конструктор:
Необязательные параметры в конструкторе
Модификаторы доступа
Вспомогательные средства конструкторов
Выше мы добавляли конструктор к нашему классу следующим образом:
TypeScript позволяет записать то же самое в сокращённой форме:
Всё остальное будет сделано автоматически (готов поспорить, вы часто будете с этим встречаться в Angular-приложениях). То есть, нам не нужен следующий код:
Геттеры и сеттеры
Предположим, что сейчас класс MyPoint выглядит так:
Механизм сеттеров и геттеров позволяет задавать ограничения, применяемые при установке или чтении свойств класса.
Вспомогательные механизмы для работы с сеттерами и геттерами
Кроме того, общепринятой практикой является использование знаков подчёркивания в начале имён свойств ( _ ):
Модули
Когда вы приступите к созданию реальных приложений, вы обнаружите, что в них понадобится далеко не один класс. Поэтому хорошо бы найти средство, позволяющее создавать классы так, чтобы их можно было использовать в других файлах, и в классах, объявленных в этих файлах, то есть, нам нужны инструменты написания модульного кода. Такие инструменты уже имеются в TypeScript. Для того, чтобы их рассмотреть, приведём код в файле myPoint.ts к такому виду:
Обратите внимание на то, что файлы main.ts и myPoint.ts находятся в одной и той же директории. 
Итоги
В этом материале мы рассмотрели основы TypeScript, которые необходимы для того, чтобы начать писать приложения на Angular. Теперь вы сможете понять устройство Angular-кода, а значит, у вас, кроме прочего, появится возможность эффективно осваивать руководства, которые посвящены этому фреймворку и предполагают знание TS.
Уважаемые читатели! Если вы хорошо разбираетесь в Angular — просим рассказать новичкам о том, как вы его изучали, и посоветовать хорошие учебные материалы по нему.
Практическое руководство по TypeScript для разработчиков
Что такое TypeScript?
TypeScript — это популярный статический типизатор (static type checker) или типизированное надмножество (typed superset) для JavaScript, инструмент, разработанный Microsoft и добавляющий систему типов к гибкости и динамическим возможностям JavaScript.
TypeScript развивается как проект с открытым исходным кодом, распространяется под лицензией Apache 2.0, имеет очень активное и высокопрофессиональное сообщество, а также огромное влияние на экосистему JavaScript.
Установка TypeScript
Для того, чтобы начать работу с TypeScript, нужно либо установить специальный интерфейс командной строки (command line interface, CLI), либо воспользоваться официальной онлайн-песочницей или другим похожим инструментом.
Для выполнения кода мы будем использовать Node.js. Устанавливаем его, если он еще не установлен на вашей машине, инициализируем новый Node.js-проект и устанавливаем транспилятор TypeScript:
Это установит tsc (компилятор TypeScript) для текущего проекта. Для того, чтобы проверить установку, в директории проекта создаем файл index.ts следующего содержания:
Затем используем транспилятор для преобразования кода, содержащегося в этом файле, в JavaScript:
Наконец, выполняем скомпилированный код с помощью команды node :
В данном случае транспилятор не делает ничего, кроме копирования кода из одного файла в другой, но это позволяет убедиться, что все установлено и работает правильно.
Определение TypeScript-проекта
tsconfig.json содержит определенное количество настроек, которые влияют на поведение транспилятора, например, на то, какие файлы следует игнорировать, какой файл является целью компиляции, какие типы импортируются и т.д.
Вы легко можете настроить TypeScript с помощью следующей команды:
Сгенерированный tsconfig.json содержит почти все возможные настройки с кратким описанием каждой из них. К счастью, данный файл содержит хорошие настройки по умолчанию, так что вы можете удалить большую часть закомментированных опций.
Мы еще вернемся к настройкам TypeScript, а сейчас давайте писать код.
Возможности TypeScript
Каждая возможность TypeScript подробно рассматривается в «Карманной книге по TypeScript». Мы сосредоточимся на практической составляющей некоторых из них. Я постараюсь пролить свет на некоторые возможности, которые часто упускаются из вида в литературе, посвященной TypeScript.
Основы типизации
Ключевая идея TypeScript заключается в контроле за динамической природой и гибкостью JavaScript с помощью типов. Давайте рассмотрим эту идею на практике.
В директории проекта создаем файл test.js следующего содержания:
Выполняем данный код:
В терминале мы увидим thirty two1 без каких-либо предупреждений об очевидной некорректности вывода. Ничего нового: обычное поведение JavaScript.
Но что если мы хотим обеспечить, чтобы функция addOne() принимала только числа? Вы можете добавить в код проверку типа переданного значения с помощью оператора typeof или же вы можете использовать TypeScript, который привнесет в процесс компиляции кода некоторые ограничения.
Заменим содержимое созданного нами ранее index.ts следующим кодом:
Попытка преобразования проваливается:
Таким образом, определение типов помогает избежать совершения ошибок, таких как передача в функцию аругментов неправильного типа.
Кроме того, TypeScript определяет несколько собственных типов, которые не имеют соответствия в JavaScript, но являются очень полезными с точки зрения используемой в данной экосистеме методологии:
Множества
TypeScript поддерживает несколько типов множеств (обычные массивы, ассоциативные массивы — карты или мапы, кортежи), обеспечивая первоклассную поддержку композиции.
Карты (maps)
Карты, как правило, используются для определения связи между ключами и значениями для представления специфичных для приложения данных:
Векторы (vectors)
Векторы — это последовательная индексированная структура данных, содержащая фиксированные типы для всех элементов. JavaScript не поддерживает данную возможность, но TypeScript позволяет разработчикам эмулировать эту концепцию:
Кортежи (tuples)
Кортежи также являются индексированной структорой данных, но типы элементов могут различаться в зависимости от их позиции:
Объединения (unions)
Другим способом создания композиции типов являются объединения, которые бывают полезны в случаях, когда принимаемый функцией аргумент может иметь один из нескольких типов.
Предположим, что мы хотим создать функцию, возвращающую адрес пользователя на основе переданного объекта или строки.
Затем с помощью typeof осуществляем разделение типов:
Здесь мы в явном виде реализовали предохранитель типов.
К слову, кортежи и объединения можно использовать совместно:
Можно определять размер и тип каждого элемента массива:
Предохранители типов (type guards)
Предохранители типов — это выражения, выполняющие проверки во время выполнения кода, результат которых может быть использован системой типов для сужения (narrow) области (scope) проверяемого аргумента.
Для случаев, когда система типов не может сделать правильный вывод о типе в текущем контексте, мы можем определить пользовательский предохранитель типа через предикат (типизированная функция, возвращающая логическое значение):
Пользовательские предохранители находятся под полным контролем разработчика, TypeScript не имеет возможности убедиться в их корректности.
Весьма распространенным случаем использования пользовательских предохранителей является влидация внешних данных с помощью JSON-схемы, предоставляемой сторонней библиотекой, такой как Ajv. Обычно, это происходит в веб-приложениях, где тело запроса имеет тип unknown (или any в зависимости от используемого фреймворка), и мы хотим проверить его перед использованием:
В основе данного механизма лежит синхронизация JSON-схемы с типом. Если мы изменим тип, но не изменим схему, то вполне можем получить неожиданное сужение типа.
В следующем разделе мы узнаем, как обеспечить автоматическую синхронизацию между схемой и типом.
Исключающие объединения (discriminated unions)
Объединения с общим литеральным полем называются исключающими. При работе с такими типами TypeScript предоставляет неявный предохраитель, позволяя избежать его создания в явном виде:
В функции getFirstProject() TypeScript сужает область аргумента без помощи предиката. Попытка получить доступ к массиву projects в первой ветке (блоке if ) закончится ошибкой типа.
Валидация во время выполнения
Как было отмечено ранее, в случае с пользовательскими предохранителями, корректность возвращаемого результата обеспечивается разработчиком.
При наличии ошибки в предикате, система типов может получить неверную информацию. Рассмотрим пример:
Существует несколько библиотек, которые позволяют обеспечить автоматическую синхронизацию между валидацией во время выполнения и соответствующим типом. Одним из самых популярных решений является runtypes, однако мы будем использовать io-ts и fp-ts.
Суть данного подхода состоит в том, что мы определяем форму (или фигуру) типа с помощью примитивов, предоставляемых io-ts ; эта форма называется декодером (decoder); мы используем ее для проверки данных, которым мы по какой-либо причине не доверяем:
Настройка TypeScript
Данный файл содержит набор ключей и значений, отвечающих за 3 вещи:
Пресеты TSConfig
TypeScript может преобразовывать код в ES3 и поддерживает несколько форматов модулей (CommonJS, SystemJS и др.).
Точные настройки зависят от среды выполнения кода. Например, если вашей целью является Node.js 10, вы можете транспилировать код в ES2015 и использовать CommonJS в качестве стратегии разрешения модулей.
К счастью, команда TypeScript разработала хороший набор пресетов, которые вы можете просто импортировать в свой tsconfig.json :
Среди наиболее важных настроек, можно отметить следующее:
Заключение
Надеюсь, данная статья позволила вам получить общее предствления о возможностях, предоставляемых TypeScript, а также о том, почему использование TypeScript в дополнение к JavaScript в настоящее время фактически является стандартом веб-разработки.
Система типов TypeScript не является идеальной, но это лучшее, что мы имеет на сегодняшний день.
Облачные серверы от Маклауд отлично подходят для сайтов с JavaScript.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
TypeScript: как с ним работать и чем он отличается от JavaScript
Frontend-разработка шагнула далеко за пределы JavaScript. Разбираемся, что такое TypeScript и почему его так любят.
На JavaScript написаны веб-интерфейсы практически всех сайтов. Однако не все его любят, а альтернатив почти нет. Единственный конкурент JS — WebAssembly, однако за несколько лет своего существования он пока не смог стать достаточно популярным.
Из-за такого расклада у разработчиков остаётся два выхода:
И многие выбирают второе решение. Поэтому за последние годы появилось сразу несколько языков-надстроек над JavaScript:
О последнем и пойдёт речь в этой статье. В 2019 году TypeScript стал одним из самых любимых языков программирования и попал в топ-10 по популярности:
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Что такое TypeScript
TypeScript — это язык программирования, в котором исправлены многие недостатки JavaScript. Код на TypeScript выглядит почти так же, как и код на JS, и, если у вас есть опыт frontend-разработки, изучить TypeScript достаточно просто. Особенно учитывая, что вы можете писать JS-код прямо в TS-скриптах.
Код на TypeScript компилируется в JS и подходит для разработки любых проектов под любые браузеры — тем более что можно выбрать версию JS, в которую будет компилироваться код.
TypeScript — проект с открытым исходным кодом, поэтому он очень быстро развивается. Многое, что появляется в TS, позже переходит и в JavaScript: например, let и const, стрелочные функции и так далее.
Давайте разберём два главных преимущества TS перед JS.
Строгая типизация
Многие проблемы в JavaScript появляются из-за динамической типизации и в целом странного поведения типов данных:
В TypeScript типизация статическая, что избавляет от множества проблем. Есть числовой тип, строковый, логический и другие. Возможно описывать и свои типы данных, например, с помощью enum:
Улучшенное ООП
И в JS, и в TS есть поддержка объектно-ориентированного программирования: классы, объекты, наследование. Однако TypeScript шагнул чуть дальше и использует больше возможностей ОПП. В том числе, например, интерфейсы:
Другой большой плюс — модификаторы доступа. Их в TypeScript три: public, private и protected. Вот пример их использования:
Также есть и другие возможности:
В будущем всё это может появиться и в JavaScript, но браузеры начнут поддерживать такие возможности ещё очень нескоро.
Минусы TypeScript
Разработчики любят этот язык, а некоторые крупные проекты уже переходят на него. Например, популярный фреймворк Angular.JS. Но этого всё равно недостаточно, чтобы он стал таким же востребованным, как JavaScript. Это связано с тем, что разработка веб-приложения на TypeScript стоит дороже и отнимает больше времени.
Особенно если необходимо использовать какую-нибудь библиотеку или фреймворк, которые не портированы на TS. В этом случае разработчикам придётся самостоятельно описывать сигнатуры (указывать типы данных) всех функций и методов — достаточно длительный процесс, учитывая размеры современных библиотек.
Также порог входа в TypeScript выше — чтобы использовать его преимущества, важно знать типы данных и объектно-ориентированное программирование.
Установка TypeScript
Чтобы использовать TypeScript, установите сначала Node.JS. Как это сделать, можете прочитать в нашей статье. После этого введите в консоли команду:
Если всё пройдёт успешно, то в папке появится файл app.js, который и подключим к странице.
В compilerOptions хранятся все параметры для компилятора:
Пишем приложение на TypeScript
Теперь создадим простой калькулятор и посмотрим, как отличается код для него на JS и на TS. Сначала сверстаем форму:
Здесь два поля для ввода чисел, кнопка, которая запускает скрипт и элемент для вывода результата:
Код TypeScript выглядит так:
А скомпилированный JS-код для такого калькулятора выглядит вот так:
Заключение
Несмотря на то что в TypeScript очень достойный синтаксис, JavaScript ещё долго будет доминировать во frontend-разработке. Поэтому его в любом случае нужно знать, даже если он вам не нравится.
Если вы только приступаете к изучению программирования, то начинать с TypeScript будет сложно. Чтобы подготовиться, вы можете записаться на наш курс по frontend-разработке — вы освоите HTML, CSS, JS и его популярные фреймворки.
Frontend-разработчик
Ноутбук, ваши навыки и знания, а также стабильный интернет — это всё, что нужно для эффективной работы. Толковые веб-разработчики высоко ценятся в международных компаниях и часто получают приглашения о работе. На курсе вы научитесь верстать сайты и создавать интерфейсы, а также соберёте два проекта в портфолио и получите современную профессию.