Для чего typescript

Что такое и для чего нужен TypeScript¶

Поскольку постижение всего нового занимает много драгоценного времени и сил, то человек прежде чем сделать выбор должен взвесить все «за» и «против». Чем больше у него сопряженного опыта, тем легче будет принять решение. Это означает, что недавно присоединившимся к JavaScript сообществу будет наиболее полезно начать свое погружение в TypeScript с подтверждения правильности своего выбора. Кроме того, данная глава сможет ответить на многие вопросы опытных разработчиков, которые обдумывают использование данного языка при создании очередного проекта. Поэтому обойдемся без затягивания и начнем по порядку разбирать самые часто возникающие вопросы, связанные с 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 и зачем он нужен

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

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

Код на TypeScript выглядит, например, так:

type User =  firstName: string; lastName: string; >; const formatFullName = ( firstName, lastName >: User) =>  return `$firstName> $lastName>`; >; formatFullName( firstName: 'John', lastName: 'Doe' >); 

Многие разработчики говорят, что TypeScript — это надмножество JavaScript. Но на самом деле TypeScript — скорее надстройка над JavaScript, нежели надмножество.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

На главной странице документации к TypeScript есть довольно честная фраза, хорошо описывающая саму суть и отношение к JavaScript:

«TypeScript is JavaScript with syntax for types» → «TypeScript — это JavaScript с синтаксисом для типов»

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

Например, если у нас есть переменная age , мы можем указать ее тип как number , чтобы ограничить ее только числовыми значениями. Это позволяет нам избежать ошибок, например, попытку присвоить строковое значение переменной age .

Типы в TypeScript также позволяют определять пользовательские типы данных, создавая интерфейсы или типы объектов, которые описывают структуру и свойства объектов.

Перед авторами TypeScript не стоит цель построения надежной системы типов — об этом они пишут в « Целях дизайна TypeScript ». Вместо этого разработчики строят систему типов, которая позволяет типизировать любой «адекватный» код на JavaScript. Условно говоря, код «средней температуры по больнице», написанный на JavaScript, можно достаточно удобно типизировать.

В чем разница между TypeScript и JavaScript

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

Типизация

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

Компиляция

TypeScript требует этапа compile time — это сборка или компиляция. На этом этапе исходный код на TypeScript преобразуется в обычный JavaScript и также проверяются типы данных.

JavaScript, который получили после сборки, выполняется непосредственно в браузере или на сервере.

Дополнительные возможности

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

enum ShapeType  Circle = 'circle', Rectangle = 'rectangle', Triangle = 'triangle', > abstract class Shape  abstract type: ShapeType; abstract calculateArea(): number; > class Circle extends Shape  type = ShapeType.Circle; radius: number; constructor(radius: number)  super(); this.radius = radius; > calculateArea(): number  return Math.PI * this.radius ** 2; > > 

const _ShapeType =  Circle: "Circle", Rectangle: "Rectangle", Triangle: "Triangle", >; class _Shape  calculateArea()  throw new Error("Method calculateArea() must be implemented."); > > class _Circle extends _Shape  constructor(radius)  super(); this.type = ShapeType.Circle; // здесь мы можем указать любую строку this.radius = radius; > calculateArea()  return Math.PI * Math.pow(this.radius, 2); > > 

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

Где используют TypeScript и в каких случаях

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

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

Чаще всего разработчики используют расширенный инструментарий TypeScript в крупных проектах. Например, генерацию типов и расширение стандартной библиотеки ( type-fest ). Однако для простых браузерных взаимодействий, маленьких интерактивных страничек и консольных утилит TypeScript подходит меньше, чем более простой и гибкий JavaScript.

Также один из крупнейших JS-фреймворков Angular, который появился от разработчиков компании Google, из коробки использует TypeScript. Кстати, большинство фреймворков (React, Vue, Svelte, Solid) тоже готовы к использованию с TypeScript.

TypeScript используют не только во фронтенд-разработке, но и в бэкенде. Бэкенд на TypeScript обеспечивает обработку запросов от клиента, взаимодействие с базой данных, обработку данных, авторизацию и другие функциональности, необходимые для работы приложения. Он выполняет вычисления, обработку и сохранение данных, а также обеспечивает взаимодействие с фронтендом, предоставляя ему необходимую информацию. При разработке бэкенда на TypeScript можно использовать различные фреймворки и инструменты, такие как Node.js, Express.js, Nest.js и другие.

Читайте также: С чего начать изучение JavaScript и как это делать эффективно

Плюсы TypeScript

Повышение производительности и обслуживаемости

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

Мощная система типов

Как мы уже сказали ранее, типы — это множество всевозможных значений. И система типов — это множество типов и множество операций над ними. Когда у нас есть мощная система типов, есть куча возможностей управлять, изменять эти типы на лету, создавая тем самым надежный и предсказуемый код.

Расширенный инструментарий

TypeScript поддерживает классы, интерфейсы, наследование, полиморфизм и другие концепции объектно-ориентированного программирования — enum , уровни доступа к членам класса ( private , public , protected ). Это делает разработку сложных приложений более структурированной и позволяет создавать переиспользуемый и расширяемый код.

Минусы TypeScript

Нагруженность кода

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

Сложность типов

Типы — это одновременно и плюс, и минус в TypeScript. Как мы уже сказали ранее, система типов позволяет управлять ими, изменять их. Но часто встречается неправильное использование. Из-за этого в бизнес-коде иногда можно встретить запутанные конструкции кода, что усложняет понимание языка.

Ограниченная экосистема

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

Сложно ли учить TypeScript

Вспомните мем с айсбергом, большая часть которого находится под водой. Если провести аналогию с TypeScript, то изучить его «верхушку айсберга», вникнуть в языковые концепции — совсем несложно. Особенно если раньше вы изучали другие строго типизированные языки вроде Java, C/C++, C#. Базовые конструкции TypeScript можно изучить за вечер, а написать первые типы или выкатить свой пулл-реквест — за неделю.

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

Сколько зарабатывают специалисты по TypeScript и как знание языка влияет на трудоустройство

TypeScript набирает все большую популярность в сообществе разработчиков. По результатам рейтинга State of Octoverse 2022 TypeScript входит в пятерку самых популярных языков программирования. TypeScript опережает по популярности PHP, C#, C++ и другие востребованные языки, а уступает только Java, JavaScript и Python. Знание и опыт работы с TypeScript могут сделать вас более конкурентоспособным на рынке труда и открыть двери к новым возможностям и проектам.

В текущих реалиях вам скорее всего придется изучить TypeScript, потому что этого требует большое количество работодателей. Также, согласно представленным вакансиям на hh.ru , разработчики, знающие TypeScript, зарабатывают больше тех, кто не пишет на этом языке.

По данным тех же вакансий на hh.ru, джуниор-разработчики на TypeScript могут получать от 60 до 100 тысяч рублей. Мидлы — от 100 до 250 тысяч рублей. Сеньоры могут претендовать на зарплату от 200 до 400 тысяч рублей.

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

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

Как установить TypeScript

Использовать TypeScript можно с помощью двух инструментов: tsc и ts-node. Первый компилирует код в JavaScript, а второй выполняет код напрямую.

Для установки TypeScript вам необходимо установить Node.js и npm. Сделать это можно по инструкции Node.js .

npm install -g typescript

• Установка ts-node:

npm install -g ts-node

Что дополнительно изучить по TypeScript

Чтобы начать разбираться в TypeScript, рекомендуем ознакомиться со следующими материалами:

Курсы — первые два подойдут для начинающих, последний для более продвинутых:

• «Основы TypeScript» на Code Basics и в Хекслете
• Total TypeScript
• Type-Level TypeScript — курс про программирование на типах.

• « Веб-стандарты »

Доклады — для тех, кто хочет глубже разобраться в TypeScript:

• Подробный разбор плюсов и минусов языка TypeScript от Ильи Климова
• Доклад про типизирование ошибок от Дмитрия Махнева и Артема Кобзаря

Не забывайте практиковаться и писать код на TypeScript. Можно начать с небольших проектов — создания простого веб-приложения или консольной программы — и постепенно переходить к более сложным.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Действительно ли нам нужен TypeScript в 2020?

TypeScript стал одним из необходимых навыков для современного веб разработчика. В 2019 он вошел в ТОП-10 наиболее используемых языков на GitHub, его поддержку полностью добавили в Create react app, и можно найти массу других свидетельств роста его популярности. В то же время такие языки, как Java и C продолжают сдавать позиции.

Когда мы говорим о преимуществах TypeScript, на ум обычно приходит следующий список:

• TypeScript поддерживает статическую типизацию
• TypeScript делает код проще для чтения и понимания
• TypeScript помогает избежать множества болезненных багов, которые обычно совершают разработчики, благодаря проверке типов в коде
• TypeScript поощряет разработчиков следовать лучшим ООП практикам
• Как следствие вышеперечисленного — TypeScript экономит время разработчиков

Помня об этом, давайте выясним, как TypeScript может помочь нам улучшить нашу продуктивность и эффективность.

Статическая типизация — волшебная таблетка от багов?

Главная фича TypeScript — поддержка статической типизации. Среди разработчиков распространено убеждение, будто динамическая типизация — источник чуть ли не всех проблем JavaScript разработчиков.

Я гадаю, что плохого люди находят в динамической типизации? Почему на другие динамические языки, например, Python и Ruby, не обрушивается такой шквал критики? Могу лишь предполагать, что проблема не столько в динамической типизации, сколько в приведении типов в JavaScript. Действительно, иногда может очень неприятно удивить код типа такого:

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

Еще один вопрос к противникам динамической типизации — если статическая типизация так хороша, почему мы все еще встечаем баги в коде, написанном на Java и C#? Да, мы можем отловить эти ошибки на этапе компиляции, но, давайте будем честны, этого недостаточно. Мы должны следовать SOLID принципам и другим лучшим практикам, чтобы обеспечить качественный код. И снова — это относится в большей степени к знаниям и квалификации программистов, чем к языку программирования.

Действительно ли легче читается TypeScript код?

Приведу 2 примера Redux Thunk:

const getUsers = async dispatch => < //. try < const users = await APIService.get('/users') dispatch(successGetUsers(users)) >catch(err) < dispatch(failedGetUsers(err)) >> 

и тоже самое на TypeScript:

const getUsers = (): ThunkAction, <>, AnyAction> => async (dispatch: ThunkDispatch, <>, AnyAction>) => < //. try < const users: User[] = await APIService.get('/users') dispatch(successGetUsers(users)) >catch(err) < dispatch(failedGetUsers(err)) >> 

Что значат все эти дженерики? Зачем в них 2 пустых объекта? Сколько времени мы должны потратить на чтение документации, чтобы во всем этом разобраться? Хорошо, это еще нормально для Redux Thunk, поскольку это очень популярная middleware для Redux, у них отличная команда поддержки и документация. Но что, если нам придется поддерживать код, который не имеет всего этого?

Больше не будет трудноуловимых багов?

В предыдущем примере Вы увидели, как TypeScript делает код более многословным. Как известно, чем больше и сложнее система — тем больше вероятность ошибки. Помимо тех ошибок, которые мы могли допустить в JavaScript коде, мы должны еще следить за тем, чтобы не сделать опечатку в интерфейсах, ошибку в дженериках, и т.д. Справедливости ради стоит заметить, что компилятор поможет быстро найти и исправить такие ошибки, но без TypeScript мы бы вообще с ними не столкнулись.

Следование лучшим практикам ООП

Как мы знаем, мы должны следовать лучшим практикам, если хотим писать качественный, легко масштабируемый и поддерживаемый код. И TypeScript может нам в этом помочь. Звучит отлично, давайте рассмотрим пример из Express:

userRoute.js

router.get('/users', (req, res) => < //get users from DB res.json(users) >) router.post('/users', (req, res) => < //create user res.json(userCreated) >) 

userRoute.ts

class UserRouter < public router = express.Router() public address = '/users' constructor() < this.initRoutes() >initRoutes() < this.router.get(this.address, this.getUsers) this.router.post(this.addressm this.createUser) >getUsers(req: express.Request, res: express.Response) < //get users from DB res.json(users) >createUser(req: express.Request, res: express.Response) < //create user res.json(userCreated) >> 

Первое, что бросается в глаза — опять пишется больше кода. Мы используем классы, чтобы писать в ООП стиле. Нам придется потом создавать экземпляры этих классов. В добавок, мы можем использовать интерфейсы, статические типы и другие конструкции. И чтобы это все не превратилось в полнейший хаос, нам не остается ничего, кроме как использовать best practices. И это то, что называется: «поощрение разработчиков к использованию лучших ООП практик».

Когда разработчики проголосовали за простые, гибкие и динамичные языки, такие как JavaScript и Python, когда парадигма функционального программирования показала свои преимущества и способность решать некоторые задачи более изящно и эффективно (и в JavaScript мы можем использовать оба подхода), TypeScript подталкивает нас к тому, чтобы писать код по-старинке в стиле ООП Java и C#.

Подводя итог, мы увидели, что TypeScript в действительности не экономит наше время, он ни защищает нас от большого количества багов, ни увеличивает нашу производительность. Более того, он требует написания большего количества кода, дополнительной конфигурации, type definition файлов, траты времени на чтение дополнительной документации. Новичок скорее напишет, может, не идеальное, но работающее приложение на JavaScript или Ruby, пока мы будем писать отличное TypeScript приложение в соотвествии со всеми принципами. А потом он наймет нас переписывать его стартап, где мы сможем использовать TypeScript, чтобы сделать все правильно.

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

Окей, мы больше не хотим Java, хотим JavaScript. Но нам не нравится JavaScript таким, как он есть, поэтому давайте сделаем его немножечко более похожим на Java. Отлично, теперь у нас есть все, что было в Java, при этом это не Java. Погнали!

TypeScript. Зачем он нужен и почему так популярен

JavaScript-код должен работать предсказуемо в любой ситуации. Мы можем добавить в него огромное количество проверок, но тогда он станет громоздким, и его будет сложно сопровождать. Или можно добавить комментарии и подсказки, но это не защитит нас от неверного использования кода. В такой ситуации на помощь приходит TypeScript. Давайте разбираться, чем он полезен для JavaScript-разработчиков.

Что такое TypeScript?

TypeScript — строго типизированный язык программирования, основанный на JavaScript. Он состоит из трёх частей:

• синтаксис языка программирования,
• компилятор,
• сервис для редактора.

Синтаксис TypeScript позволяет разработчику элегантно выразить решение задачи в виде текста в файле .ts или .tsx . Он является эволюцией синтаксиса JavaScript, поэтому любая программа JS синтаксически корректна на TypeScript.

Компилятор tsc помогает обнаружить множество дефектов до загрузки на продакшн. Он преобразует исходный текст TypeScript в JavaScript и анализирует программу, стараясь найти проблемные места. TypeScript может создать. js-файлы для любой версии JavaScript, начиная с ES3. Разработчик может диктовать TypeScript, какие правила анализа активировать, а какие — отключить.

Такие дефекты не всегда являются ошибками. Порой они долгое время не приводят к нарушению технического задания, но при появлении новых требований со стороны заказчика становятся причиной неоправданного удорожания работы.

Например, в JavaScript есть оператор try catch . В блок catch приходит значение с информацией об ошибке. Это значение может быть чем угодно, например, строкой, числом или объектом. В JavaScript разработчик на свой страх и риск использует «опыт и догадки». Один из вариантов поведения разработчиков — верить, что информация об ошибке будет типа Error .

В TypeScript можно заставить компилятор проверить использование значения в catch , а можно это правило отключить:

catch(err)

Будет ошибкой, если err — число 42.

Если поставить флаг компилятора useUnknownInCatchVariables , то компилятор не разрешит код из примера. Он заставит разработчика подумать, как выйти из положения, и тем самым снизит риск аварийного завершения программы.

Сервис для редактора выполняет такой же анализ, как и tsc-компилятор, но он это делает по мере того, как вы пишете программу. Есть множество редакторов с поддержкой TypeScript — например, с ним точно работают VS Code, Atom, WebStorm и Sublime Text. Если в списке нет редактора, которым вы пользуетесь, то для знакомства можете использовать песочницу TS Playground.

Онлайн-редактор TS Playground создан для изучения TypeScript. Он позволяет исследовать все важные аспекты этого языка программирования, подключить модули из npm, изучить назначения флагов компилятора, рассмотреть полученный JavaScript и текст определения модуля (.d. ts). При этом песочница обладает ограниченными возможностями для запуска полученного JavaScript.

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

�� Узнайте больше о теории типов, научитесь на практике использовать аннотацию типов и обобщённое программирование на профессиональном курсе по TypeScript.

Что говорит сообщество?

Опросы Stack Overflow в 2020 и 2021 годах показывают, что предпочтения профессиональных разработчиков и работодателей меняются. В рейтинге популярности языков программирования Stack Overflow за последние два года JavaScript сохраняет лидирующую позицию, но TypeScript стремительно его догоняет:

Популярность языка на SO

Статистика Github за четвёртый квартал 2021 года показывает аналогичную тенденцию:

Доля пулреквестов

Изменение к прошлому году

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

Исследования использования различных языков программирования на основе статистики пользователей Github показывают, что на TypeScript чаще всего переходят с других языков. Похоже, разработчики всё чаще забрасывают какой-нибудь CoffeeScript и начинают программировать на TypeScript.

Роль TypeScript в вашей работе

Создатели TypeScript ставят перед собой задачу: помочь разработчикам создавать и развивать продукты для любой системы, умеющей исполнять JavaScript, и добавить разработчикам уверенность в том, что программа будет выполняться предсказуемым образом.

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

Убедиться в отсутствии противоречий в программе на TypeScript проще, чем сделать то же самое для программы на JavaScript. Всё дело в аннотации типов.

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

Вот как можно озвучить работу сервисов TypeScript в таком отрывке:

const title = "TypeScript"; console.log(title.toUpperCase()); 

1. Известно, что в JavaScript к строковому значению можно применить метод toUpperCase .
2. В любой среде выполнения JavaScript есть console.log.
3. Программист объявил неизменяемую переменную.
4. Значение объявленной переменной — строка.
5. Поскольку (1), (3) и (4), к переменной всегда можно применить метод toUpperCase .
6. Вывод: поскольку (2) и (5), программа будет всегда исполняться.

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

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

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

let title: string; console.log(title.toUpperCase()); 

Разработчик объявил намерение использовать в переменной строковые значения. Переменная осталась неинициализированной. При отсутствии значения нельзя применять метод toUpperCase

После этих рассуждений TypeScript сообщает об ошибке Variable ‘title’ is used before being assigned до начала выполнения программы. Ещё до того, как вы закончите печатать вторую точку с запятой! К этому времени вы не успеете забыть, зачем объявили переменную title , и потратите меньше времени на исправление ситуации.

Часто способность TypeScript находить подобные дефекты и требовать от разработчика их устранения вызывает раздражение у начинающих программистов. Действительно, кому приятно признавать свои ошибки? Но с опытом приходит понимание, что подсказки компилятора важны для создания качественных продуктов.

TypeScript — это гораздо больше, чем сервис проверки типов. Он выполняет и другие задачи:

• Определяет синтаксис, чтобы разработчик мог выразить намерение использовать значения определённого типа let title: string; .
• Контролирует правомерность использования значения в контексте программы title.toUpperCase() .
• Сообщает разработчику об ошибочном использовании операций в отношении переменных прямо в редакторе, до запуска программы.
• Даёт возможность разработки в методологии ООП. Ключевые слова private, protected, public, abstract, extends, implements .
• Позволяет создавать JavaScript любой версии от JS3 и выше.
• Даёт возможность использовать модули любого формата.
• Открывает возможность обобщённого программирования. Дженерики позволяют создавать компоненты с реализацией алгоритмов в общем виде.
• Позволяет работать в методике аспектного программирования через пока ещё нестандартные декораторы.
• Позволяет создавать и дополнять аннотациями типов существующие библиотеки JavaScript. Да и стандартные тоже.
• Компилирует JSX не только для React, вы можете предоставить свою реализацию createElement .
• Интегрируется с Babel, Browserify, Grunt, Gulp, Jspm, MSBuild, NuGet, Rollup, Svelte Compiler, Vite, Webpack.
• Является Open Source-проектом под «накидкой» Microsoft.

И это лишь часть полезных возможностей и особенностей TypeScript.

Несколько примеров помощи со стороны TypeScript

В процессе компиляции TypeScript создаёт красивый JavaScript. Вы можете убедиться в этом сами в песочнице TypeScript Playground. Для наглядности, вот что происходит с определением класса в старых версиях JavaScript:

TypeScript

class Example<> 

Флаг компилятора -target=ES3

use strict"; var Example = /** @class */ (function () < function Example() < >return Example; >());" 

Согласитесь, удобнее написать одну строку на TypeScript и запустить компилятор, чем выписывать IIFE — непосредственно вызванное функциональное выражение.

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

TypeScript

import < useState, useEffect >from "react"; interface ComponentProps < delay: number; >export const Component = (props: ComponentProps) => < const < delay >= props; const [elapsed, setElapsed] = useState(false); useEffect(() => < let cleaned = false; setTimeout(() => < if (cleaned) < return; >setElapsed(true); >, delay) return () => < cleaned = true; >; >, [delay]) return > 

JavaScript-результат с флагом module=UMD

function (factory) < if (typeof module === "object" && typeof module.exports === "object") < var v = factory(require, exports); if (v !== undefined) module.exports = v; >else if (typeof define === "function" && define.amd) < define(["require", "exports", "react"], factory); >>)(function (require, exports) < "use strict"; Object.defineProperty(exports, "__esModule", < value: true >); exports.Component = void 0; const react_1 = require("react"); const Component = (props) => < const < delay >= props; const [elapsed, setElapsed] = (0, react_1.useState)(false); (0, react_1.useEffect)(() => < let cleaned = false; setTimeout(() => < if (cleaned) < return; >setElapsed(true); >, delay); return () => < cleaned = true; >; >, [delay]); return React.createElement("h1", null, elapsed ? 'loading' : 'completed'); >; exports.Component = Component; >); 

Где вы столкнётесь с TypeScript?

При использовании Angular: если разработчик захочет использовать инструменты Angular, ему придётся окунуться в TypeScript. Вы, конечно, можете продолжать «ангулярить» на JavaScript, но это будет непросто.

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

Многие библиотеки, в частности, Redux, уже несколько последних версий создаются сначала на TypeScript и собираются в npm-пакеты после компиляции в JavaScript.

А ещё TypeScript позволяет методично и предсказуемо портировать кодовую базу из JavaScript. Мы предвидим, что разработчики, сопровождающие легаси-проекты этим воспользуются, и тогда вам точно пригодится знание TypeScript.

Что дальше?

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

Для успешного использования TypeScript разработчики должны уметь создавать и описывать типы значений, понимать, как эти типы между собой взаимодействуют — значит, разработчикам придётся учиться. По нашему мнению, лучше приложить немного усилий для изучения TypeScript сейчас, чем позже прикладывать массу сил, чтобы избежать встречи с ним.

Должны ли вы применять TypeScript в каждом своем проекте и какой язык программирования лучше? На эти вопросы, скорее всего, нет ответа, потому что они неверно поставлены. Следует задать вопрос о том, какое преимущество тот или иной язык программирования принесёт вашему проекту. В этом случае в процессе развития проекта, при появлении новых запросов со стороны заказчика, TypeScript будет каждый раз более и более выгодным в сравнении с JavaScript.

Узнать больше

• Почему разработчики выбирают Vue
• Зачем фронтендерам React, если есть JavaScript
• Для чего использовать дженерики в TypeScript

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.