Что такое TypeScript и зачем он нужен

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

• Что такое TypeScript
• В чем разница между TypeScript и JavaScript
  • Типизация
  • Компиляция
  • Дополнительные возможности
• Где используют TypeScript и в каких случаях
• Плюсы TypeScript
  • Повышение производительности и обслуживаемости
  • Мощная система типов
  • Расширенный инструментарий
• Минусы TypeScript
  • Нагруженность кода
  • Сложность типов
  • Ограниченная экосистема
• Сложно ли учить TypeScript
• Сколько зарабатывают специалисты по TypeScript и как знание языка влияет на трудоустройство
• Как установить 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 остается более простым и гибким в использовании для создания динамических веб-приложений.

Читайте также: Стоит ли учить 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 и как знание языка влияет на трудоустройство

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.

• Установка tsc:

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

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