TypeScript: что это и зачем он нужен разработчикам

Содержание

• Введение
• Что такое TypeScript
• TypeScript vs JavaScript: основные преимущества
• Как работает TypeScript
• Где используют TypeScript
  • TypeScript и Frontend-разработка
  • TypeScript и Backend-разработка
  • Мобильные и кросс-платформенные приложения
  • Корпоративные приложения
• Пример кода на TypeScript с объяснением
• Заключение

Введение

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

Начните знакомство с TypeScript

Бесплатный курс по TypeScript — учись прямо сейчас!

Что такое TypeScript

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

Тип — это множество значений переменной, функции или объекта. Например, если задать переменной тип number, она будет содержать только числовые значения. Статистическая типизация важна, чтобы задавать правила: какие операции можно и нельзя выполнять с переменной, функцией или объектом. Например, с числовыми переменными можно выполнять арифметические действия, а с текстовыми — нет.

Читайте также: JavaScript: где используется и как работает

TypeScript vs JavaScript: основные преимущества

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

1. Статическая типизация. Благодаря явному указанию типов разработчик четко знает, какой формат данных ожидается в коде. Это минимизирует ошибки на ранних этапах.
2. Масштабируемость. TypeScript упрощает поддержку больших проектов, где отлаживание и поиск ошибок без типизации могут стать проблемой.
3. Обратная и прямая совместимость с JavaScript. Поскольку TypeScript — надстройка JavaScript, он легко интегрируется в существующие проекты без необходимости переписывать весь код. Это позволяет обновлять старые проекты без необходимости их полностью переписывать.
4. Современные возможности JavaScript. TypeScript поддерживает новейшие функции языка JavaScript, что позволяет поддерживать жизнеспособность существующих проектов на JavaScript и создавать новые современные продукты.
5. Лучшая поддержка в IDE. IDE для TypeScript поддерживают автодополнение, проверку ошибок во время компиляции и рефакторинг кода, что значительно ускоряет работу.

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

Как работает TypeScript

TypeScript — это язык, который требует компиляции. Исходный код на TypeScript (.ts файлы) компилируется в JavaScript (.js файлы), который затем можно исполнять в браузерах или на сервере. Этот процесс позволяет:

• Проверить ошибки. TypeScript-компилятор (tsc) выявляет несоответствия типов и предупреждает о них.
• Оптимизировать код. Код на JavaScript, который получается после компиляции, обычно более оптимизирован и понятен.

Пример преобразования TypeScript в JavaScript:

• Код TypeScript.

function add(a: number, b: number): number {
 return a + b;
}
console.log(add(2, 3));

• Скомпилированный JavaScript.

function add(a, b) {
 return a + b;
}
console.log(add(2, 3));

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

Также интересно: Что такое язык программирования C++

Где используют TypeScript

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

Вот примеры использования TypeScript для разных задач.

TypeScript и Frontend-разработка

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

• Angular. Этот фреймворк полностью построен на TypeScript. Его строгая типизация и возможности упрощают разработку сложных приложений с компонентной структурой.
• React. Хотя React изначально использует JavaScript, TypeScript постепенно внедряется в большинство крупных проектов. Он помогает описывать пропсы (произвольные входные данные) компонентов, предотвращая ошибки во время разработки.

TypeScript и Backend-разработка

С помощью TypeScript можно создавать производительные серверные приложения. Это особенно полезно для работы с REST API или микросервисами. Для создания серверных приложений с TypeScript можно использовать следующие технологии:

• NestJS. Фреймворк для разработки серверных приложений, построенный на TypeScript, поддерживает модульную архитектуру и предоставляет встроенные инструменты для работы с базами данных, авторизацией и другими задачами.
• Express с TypeScript. TypeScript используют для построения серверов на базе Express, получая преимущества строгой типизации и автодополнения.

Мобильные и кросс-платформенные приложения

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

• Ionic. Платформа, которая позволяет создавать гибридные приложения, используя веб-технологии. TypeScript обеспечивает стабильность и предсказуемость кода.
• NativeScript. Инструмент для создания нативных мобильных приложений с использованием Angular или Vue и TypeScript.

Бесплатный курс по TypeScript

Начните учиться бесплатно!

Корпоративные приложения

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

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

Пример кода на TypeScript с объяснением

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

// Интерфейс для описания структуры объекта
interface Product {
  id: number;
  name: string;
  price: number;
  category?: string; // Необязательное поле
}

// Создаем объект с использованием интерфейса
const product: Product = {
  id: 1,
  name: "Ноутбук",
  price: 1200,
  category: "Электроника",
};

// Функция для вычисления общей стоимости товаров
function calculateTotal<T extends { price: number }>(items: T[]): number {
  return items.reduce((total, item) => total + item.price, 0);
}

// Пример массива товаров
const products: Product[] = [
  { id: 1, name: "Ноутбук", price: 1200 },
  { id: 2, name: "Смартфон", price: 800 },
];

// Вычисляем общую стоимость
console.log("Общая стоимость:", calculateTotal(products));

// Класс с наследованием
class User {
  constructor(public id: number, public name: string) {}

  displayInfo(): void {
    console.log(`ID: ${this.id}, Имя: ${this.name}`);
  }
}

class Admin extends User {
  constructor(id: number, name: string, public role: string) {
    super(id, name);
  }

  displayInfo(): void {
    super.displayInfo();
    console.log(`Роль: ${this.role}`);
  }
}

// Создаем экземпляр класса Admin
const admin = new Admin(1, "Анна", "Администратор");
admin.displayInfo();

Этот код показывает:

• Типизацию через интерфейсы. Описывается структура объекта Product.
• Дженерики. Функция calculateTotal принимает массив объектов с полем price, это может быть не только Product.
• Классы и наследование. Класс Admin наследует от User, добавляя свою логику.

Заключение

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