Typescript что это такое
Практическое руководство по 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
Что такое TypeScript
TypeScript представляет язык программирования на основе JavaScript.
Однако, казалось бы, зачем нужен еще один язык программирования для клиентской стороны в среде Web, если со всей той же самой работой прекрасно справляется и традиционный JavaScript, который используется практически на каждом сайте, которым владеет множество разработчиков и поддержка которого в сообществе программистов довольно высока. Но TypeScript это не просто новый JavaScript.
Во-вторых, TypeScript реализует многие концепции, которые свойствены объектно-ориентированным языкам, как, например, наследование, полиморфизм, инкапсуляция и модификаторы доступа и так далее.
В-третьих, потенциал TypeScript позволяет быстрее и проще писать большие сложные комплексные программы, соответственно их легче поддерживать, развивать, масштабировать и тестировать, чем на стандартном JavaScript.
Генерируемый компилятором TypeScript код JS поддерживается подавляющим большинством браузеров. Хотя в процессе разработки мы можем сами задать целевой стандарт ECMAScript.
Как использовать TypeScript? Поскольку данный язык является OpenSource, то все его инструменты доступны для всех желающих. Для работы с TypeScript мы можем использовать как Windows, так и Linux и MacOS.
Сам компилятор TS можно установить с помощью команды менеджера пакетов npm, который используется в Node.js:
Для написания кода на языке TypeScript можно использовать любой самый простейший текстовый редактор. Многие текстовые редакторы и среды разработки, например, Visual Code Studio, Atom, Sublime, Visual Studio, Netbeans, WebStorm и другие, имеют поддержку TypeScript на уровне плагинов, что позволяет воспользоваться рядом преимуществом, например, подцветкой кода или всплывающей подсказкой по типам и конструкциям языка.
Что такое TypeScript и для чего он нужен
Поскольку постижение всего нового занимает много драгоценного времени и сил, то человек, прежде чем сделать выбор, должен взвесить все «за» и «против». Чем больше у него сопряженного опыта, тем легче будет принять решение. Это означает, что недавно присоединившимся к JavaScript сообществу людям будет полезнее начать свое погружение в TypeScript с подтверждения правильности своего выбора. Кроме того, данная глава сможет ответить на многие вопросы опытных разработчиков, которые обдумывают использование данного языка при создании очередного проекта. Поэтому обойдемся без затягивания и начнем по порядку разбирать самые часто возникающие вопросы связанные с TypeScript.
Определение
TypeScript — это язык программирования со статической типизацией, позиционирующий себя как язык, расширяющий возможности JavaScript.
Typescript код компилируется в JavaScript код, который можно запускать как на клиентской стороне (браузер), так и на стороне сервера (nodejs). Качество сгенерированного кода сопоставимо с кодом, написанным профессиональным разработчиком с большим стажем. Мультиплатформенный компилятор TypeScript отличается высокой скоростью компиляции и публикуется под лицензией Apache, а в его создании принимают участие разработчики со всего мира, что привело к традиции выпускать новую версию каждые два месяца. Несмотря на такую периодичность, версии долгое время сохраняют совместимость, а по истечению долгого времени устаревшее поведение остается доступным при активизации специальных флагов компилятора. Поэтому не стоит опасаться, что проект будет лишен новых возможностей языка из-за версионных различий TypeScript. Ну а большое количество разработчиков компилятора означает, что с каждой новой версией компилятор получает обновления, касающиеся всех направлений, будь то синтаксические конструкции или оптимизации скорости компиляции и сборки проекта.
История TypeScript
Разработчиком языка TypeScript является Андерс Хейлсберг, также известный как создатель языков Turbo Pascal, Delphi и C#. С того момента, когда компания MicroSoft* анонсировал данный язык в 2012 году, TypeScript не перестает развиваться и склоняет все больше профессиональных разработчиков писать свои программы на нем. На текущий момент трудно представить крупную компанию, не использующую его в своих проектах. Поэтому знание TypeScript будет весомым критерием при устройстве на работу своей мечты.
Для чего нужен TypeScript
Поскольку сложность современных вэб приложений сопоставима с настольными, то прежде всего TypeScript предназначен для выявления ошибок на этапе компиляции, а не на этапе выполнения. Кроме того, за счет системы типов разработчики получают такие возможности, как подсказки и переходы по коду, которые значительно ускоряют процесс разработки. Помимо этого, система типов в значительной степени избавляет разработчиков от комментирования кода, которое отнимает значительное время. Также система типов помогает раньше выявлять проблемы архитектуры, исправление которых обходятся дешевле на ранних этапах.
Хотя на текущий момент практически невозможно найти библиотеку, которая бы не была портирована на TypeScript. JavaScript код, оставшийся от предыдущих проектов, не стоит списывать со счетов, поскольку его совместное использование не вызовет никакой проблемы. Компилятор TypeScript отлично справляется с динамическим JavaScript кодом, включенным в свою типизированную среду, и даже выявляет в нем ошибки. Кроме того, при компиляции .ts файлов в .js дополнительно генерируются файлы декларации .d.ts, с помощью которых разработчики, создающие свои программы исключительно на JavaScript, получат все прелести типизированного автодополнения в любой современной среде разработки.
Зачем разработчику TypeScript
TypeScript значительно сокращает время на устранение ошибок и выявление багов, которые порой не так просто определить в динамической среде JavaScript.
В случае, если для разработчика TypeScript является первым типизированным языком, следует знать, что его изучение значительно ускорит процесс профессионального роста, поскольку типизированный мир открывает аспекты программирования, которые не проявляются в языках с динамической типизацией.
Помимо этого, TypeScript позволяет писать более понятный и читаемый код, максимально описывающий предметную область, за счет чего архитектура приложения становится более выраженной, а разработка неявно увеличивает профессиональный уровень программиста.
Всё это в своей совокупности сокращает время разработки программы, снижая её стоимость и предоставляя разработчикам возможность поскорее приступить к реализации нового и ещё более интересного проекта.
Почему вам стоит использовать TypeScript
Если вы еще не в курсе: JavaScript победил. На сегодняшний день это самый кроссплатформенный язык, доступный для любых устройств. На нем можно создавать веб-приложения (клиент и сервер), в том числе с оффлайн-режимом работы, десктопные приложения (для Windows 8), приложения для смартфонов и планшетов (PhoneGap), расширения для Microsoft Office, SharePoint и Dynamics. Код на JavaScript работает в СУБД, таких как MongoDB и даже Hadoop в Windows Azure (BigData однако).
На Javascript уже написаны Doom и эмулятор Linux. Фактически решая любую задачу, кроме написания модуля ядра ОС, вы встретитесь с JavaScript. Если вы еще не знаете JavaScript, то вам следует срочно начать его изучать.
У JavaScript много недостатков
Многие разработчики испытывают такую реакцию на JavaScript:
Большую часть людей пугает отсутствие intellisense при наборе кода и манипуляции с HTML\CSS. Но это не самые большие проблемы.
Самая большая проблема JavaScript в том, что его придумал не Microsoft.
Основные недостатки JavaScript:
Для того чтобы не писать JavaScript были созданы компиляторы Java –> JavaScript, C# –> JavaScript, LLVM –> JavaScript. Но все это приводит к тому, что на программу на исходном языке накладываются существенные ограничения, а также существующие библиотеки для JavaScript не используются.
TypeScript исправляет часть недостатков
Microsoft, посмотрев на эту картину, решил что нужен язык, который с одной стороны исправляет проблемы, с другой стороны максимально близок к JavaScript, чтобы использовать существующие наработки.
Так и появился язык TypeScript (ссылка на оффсайт). TypeScript является надмножеством JavaScript. То есть любой корректный код на JavaScript также является корректным кодом на TypeScript.
TypeScript использует статическую типизацию, то есть все типы проверяются при компиляции. Кстати сам компилятор TypeScript написан на TypeScript и является open source (ссылка на репозитарий).
TypeScript добавляет возможность объявлять модули, классы и интерфейсы. Это позволяет масштабировать разработку сложных JavaScript приложений.
На выходе получается обычный JavaScript, который не требует дополнительных библиотек или специальных компонентов.
TypeScript в действии
При наборе кода в VisualStudio доступна богатая подсказка:
Поддерживаются классы, аннотации и вывод типов, работает интерактивная отладка.
С легкостью можно использовать в TypeScript внешние библиотеки, например jquery:
При несовпадении типов компилятор ругается:
Компиляция TypeScript происходит при сборке проекта, проверяя многие ошибки без запуска.
Ну и самая главная фича, от вида которой я чуть не расплакался:
Кто еще не до конца вдохновился может глянуть на raytracer на TypeScript, результат работы.
Как начать использовать TypeScript
Слева код на TypeScript, справа результат компиляции на JavaScript. Таким образом использование TypeScript поможет вам лучше понять и изучить JavaScript.
Тем, кто не использует visual studio, повезло чуть меньше. На сегодня доступны плагины для распространенных текстовых редакторов, а также инструменты командной строки.
Далее вам следует обязательно прочитать туториалы от настоящего папы, иногда стоит заглядывать в спецификацию.
Можество определений типов для популярных библиотек можно найти в проекте DefinitelyTyped. Судя по нику автора проекта это наш соотечественник.
☕ Самоучитель для начинающих: как освоить TypeScript с нуля за 30 минут?
Мы расскажем об истории создания и особенностях синтаксиса TypeScript, а также приведем список литературы для более полного погружения в тему и развития навыков программирования.
История TypeScript
По мере развития интернета и браузеров JavaScript стал все чаще использоваться для разработки сайтов. Из-за кажущейся простоты языка в приложениях возникало много ошибок, что привело к проблемам с поддержкой. Появление TypeScript было обусловлено недостатками JavaScript и сложностями при разработке программ. Индустрии требовалось что-то близкое, но с более развитыми инструментами для поиска и устранения ошибок еще до запуска кода в продакшен. К счастью, способ решения задачи давно известен – нужно сделать язык более или менее жестко типизированным.
Ориентирован TypeScript на прикладные задачи – он помогает кратко и точно выражать идеи (писать более читаемый код), а также обеспечивает масштабируемость и безопасность приложений. Эта надстройка вокруг основного языка JavaScript дает разработчикам статическую типизацию и приведение типов.
Главные преимущества TypeScript:
Начало работы с TypeScript
Чтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio.
Установка через NPM
Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду:
В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo:
Использование Visual Studio
Если при инсталляции IDE отметить опцию «Node.js development», установятся все средства для работы с TypeScript.
Синтаксис TypeScript
В TypeScript есть разные типы переменных, а проверка корректности значений перед обработкой позволяет сделать поведение кода более предсказуемым. Язык модули, функции, переменные, операторы и выражения, а также комментарии.
Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной.
Основные типы данных:
| Ключевое слово | Тип данных | Описание | Пример кода |
| Any | Динамичный | Описывает данные, тип которых может быть неизвестен на момент написания приложения. | let AnyVar: any = «green»; console.log(AnyVar); // сейчас AnyVar – это string AnyVar = 30; console.log(AnyVar); // сейчас AnyVar – это number |
| Number | Числовой | Целые числа или числа с плавающей запятой | let decimal: number = 6; |
| String | Строчный | Последовательность символов Unicode | let color: string = «blue»; color = ‘grey’; |
| Boolean | Логический | Используется для логических значений true и false | let isDone: boolean = false; |
| Void | Void | Отсутствие конкретного значения. Используется для функций, которые не возвращают значений | button.onclick = () => void doSomething(); |
| Null | Null | Используется, когда переменная определена (например, строка или число), а значение неопределенно. | let x: null = null; console.log(x); |
| Undefined | Undefined | Используется для всех неинициализированных переменных | let x: undefined = undefined; console.log(x); |
Большинство из этих типов соотносится с примитивными типами из JavaScript.
<> – комплексный объект, которому можно определить свойства или индикатор:
Рассмотрим пример кода:
Array используется для определения типов элементов массива.
Указать тип можно двумя способами: Array и T[ ]
Массив чисел Number [ ]
Массив строк Array :
Enum – перечисление, возможность дать имена наборам числовых значений:
Кортежи в TypeScript имеют фиксированное количество элементов определенных типов:
Компилятор выдаст приблизительно такие сообщения об ошибках:Type ‘number’ is not assignable to type ‘string’.
Type ‘string’ is not assignable to type ‘number’.
Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные.
Класс, название, атрибуты:
Тот же класс, вместе с модификаторами:
Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы.
TypeScript чувствителен к регистру, а использование точки с запятой в нем необязательно. Каждая строка инструкции называется оператором, одна строка может содержать несколько операторов и вот тогда их нужно разделять точкой с запятой.
Hello world
TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно).
6 книг по TypeScript для углубленного изучения
Мануал по TypeScript занимает всего 10 страниц. Восполнить пробелы помогут книги с задачами и описаниями чужого опыта. Больше практики, меньше теории.
Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!