Все статьи | Код

Как устроен TypeScript и зачем его используют. Большой гайд для новичков

Как устроен TypeScript и зачем его используют. Большой гайд для новичков главное изображение

Рассказываем, как появился TypeScript, почему он так востребован и чем отличается от обычного JS.

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

Поэтому команда Microsoft начинает разработку нового инструмента — TypeScript. Проектом руководит легендарный Андерс Хейлсберг — человек, который создал Turbo Pascal, Delphi и C#. Прошло 7 лет, и теперь 78% веб-разработчиков используют TypeScript в своих проектах.

Зачем нужен TypeScript

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

Говоря проще, если вы работаете со строками, TypeScript не даст вам внезапно перейти на числа или объекты. Добавление строгой типизации — это как заключенный контракт, по которому все обязуются использовать только указанный тип. Когда проект крупный, то перезапись типов данных и неправильная работа с ними — это причина 20% багов в коде.

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

Читайте также: Как сохранять фокус на протяжении всего обучения: советы от Хекслета

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

Есть универсальное решение — брать от TypeScript только то, что нужно проекту в данный момент. Двигайтесь маленькими шагами, играйте в песочнице по мануалу и не переживайте насчет того, что ваш проект не выглядит как эталон объектно-ориентированного программирования. Хотя TypeScript активно поддерживает и функциональное программирование.

TypeScript работает везде, где работает JavaScript, и доступен для всех его библиотек и фреймворков — это сильно упрощает его использование. При этом TypeScript поддерживают многие библиотеки несмотря на то, что они тоже типизированы, потому что это сильно снижает порог входа для работы с ними для новичков. Также один из крупнейших JS-фреймворков Angular, который тоже появился от разработчиков компании Microsoft, из коробки использует TypeScript.

При этом не все крупнейшие IT-компании используют TypeScript в своей работе. Например, без TypeScript работают GitLab, GitHub, Netflix и Atlas. А некоторые эксперименты даже показывают, что введение TypeScript в проект, где уже есть хорошие инженерные практики, замедляет работу, не давая видимых преимуществ. 

Однако в текущих реалиях вам скорее всего придется изучить TypeScript, потому что этого требует большинство работодателей. Зато при изучении TypeScript можно научиться продумывать архитектуру приложения еще до написания кода и прокачать бесценный для программиста навык стратегического мышления. О том, как это работает, проще объяснить на примерах:


let helloWorld = "Hello, World";

По сути, вы уже использовали TypeScript. Вы передали переменной helloWorld строку, а TypeScript назначил этот тип данных переменной, просто вам ничего не сказал. Теперь попытка записать в переменную helloWorld число 42 приведет к ошибке: "Type 'number' is not assignable to type 'string".

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

Напишем функцию Hello, world, которая будет печатать на экран приветствие. Заранее определяем, какой тип данных должен попадать на вход, это строки. Пишем так:


const helloWorld = (greeting: string) => console.log(greeting);

Простейший синтаксис для TypeScript выглядит так: value: type. Одна эта простая деталь дает нам невероятные возможности для построения надежных абстракций, то есть кода, который ведет себя предсказуемо и не требует специальных знаний для того, чтобы им пользоваться.

Кроме того, вам не надо писать дополнительные 3-5 строчек для проверки входящих данных: все пограничные случаи, связанные с типами, разрешаются простейшим синтаксисом.

Можно пойти еще дальше и задать тип для значений, которые функция возвращает в качестве результата. Например, убедимся, что функция getWords действительно разбивает строку на массив слов:


const getWords = (sentence: string): object => sentence.split(' ');

Синтаксис уже нам знаком: сначала мы пишем значение, а потом тип, который хотим ему присвоить. Теперь, если разработчик попытается вернуть из функции что-то, кроме объекта или массива, TypeScript будет ругаться.

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

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

В TypeScript существуют три модификаторов доступа: private, public и protected. По умолчанию весь код у нас public, но если приложения хорошая архитектура, то на некоторые данные обязательно ограничен доступ (private или protected). Это толкает к написанию модульных приложений, как конструктор Lego, которые легко поддерживать и переписывать.

У TypeScript есть и другие инструменты — например, декораторы. Но их использование нежелательно, поскольку функция экспериментальная и основана на успевшем устареть подходе.

Памятка по безопасности

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

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

Чтобы в данном случае успокоить компилятор, придется задать для всех объектов тип any, а это совсем не похоже на волшебную магию строгой типизации. Вообще, у TypeScript много случаев странных ошибок, от которых не спасет изучение спецификации — ее не обновляли очень давно.

Целая куча проблем появляется и тогда, когда разработчик подключает TypeScript без особой цели, «чтобы было». Например, перевести проект из JavaScript в TypeScript легко, но вот чтобы сделать наоборот, придется или вручную удалять ключевые слова TS, либо пользоваться уже сгенерированными файлами.

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

А еще явное указание типов создает соблазн не документировать код. Это условный минус, главное помнить — документировать код все равно надо: описывайте свойства интерфейсов и параметры функции, особенно если именование у вас не на высоте.

И наконец, если сам разработчик плохо понимает, какие типы данных где нужны, его не спасет даже статическая типизация.

Заключение

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

Освоить TypeScript не так сложно, если вы хорошо понимаете чистый JavaScript. Для начала создайте файл в формате .ts и напишите простое приложение, следуя тем подсказкам, которые выдает редактор кода.

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Аватар пользователя Lada Golunova
Lada Golunova 26 апреля 2022
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
1 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
1 июня 5 месяцев