TypeScript для начинающих: преимущества языка и первый код

TypeScript — то же самое, что и JavaScript, но переменные не могут менять типы.

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

С момента разработки TypeScript активно развивался, сегодня это один из самых популярных языков программирования. По данным опроса сообщества StackOverflow в 2022 году, TypeScript занимает 3 место в рейтинге самых любимых языков программирований.

В этой небольшой статье я хотел бы изложить основные особенности и преимущества TypeScript.

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

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

npm install -g typescript

Дальше для компиляции кода на языке TypeScript в JavaScript необходимо использовать префикс tsc, например:

tsc my-first-typescript-app.ts

После чего код из файла my-first-typescript-app.ts компилируется в файл формата JavaScript. Важно, что любой код TypeScript в любом случае компилируется в JavaScript.

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

Типы переменных

При объявлении переменной можно явно указать её тип. В ином случае TypeScript сам узнает тип из значения.

const value: string = "Данила вещает...";
const value = "Данила вещает...";

Массивы

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

const array: string[] = ['A', 'B', 'C']

Объекты

TypeScript может вывести тип объекта из значений его полей.

const user: {
  id: number;
  name: string;
  role: 'student' | 'teacher';
  password: string;
} = {
  id: 1,
  name: 'Данила',
  role: 'teacher',
  password: 'Frontend'
}

Типы и интерфейсы

В TypeScript мы можем выносить типизацию отдельно с помощью type и interface

type RoleType = 'student' | 'teacher';

interface UserType {
  id: number;
  name: string;
  role: RoleType;
  password: string;
}

const user: UserType = {
  id: 1,
  name: 'Данила',
  role: 'teacher',
  password: 'Frontend'
}

Функции

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

const multiplication = (a: number, b: number): number => {
  return a * b;
}

Дженерики

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

const convert = <T>(value: T): Array<T> => {
  return [value];
}

convert<string>('Данила вещает...'); // [ 'Данила вещает...' ]
// За место T в функции convert подставился тип 'string'

Enum

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

enum Roles {
  Student, // 0
  Teacher, // 1
}

// или

enum Roles {
  Student = 'student', // 'student'
  Teacher = 'teacher' // 'teacher'
}

interface UserType {
  id: number;
  name: string;
  role: Roles;
  password: string;
}

const user: UserType {
  id: 1,
  name: 'Данила',
  role: Roles.Student, // 'student'
  password: 'Frontend'
}

Завершение

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

TypeScript - активно развивающийся и популярный язык программирования, который стоил и стоит внимания в 2023 году.

В будущих статьях я покажу вам Best Practices, как правильно типизировать различные элементы на React, Redux Toolkit, NestJS и прочих поддерживаемых технологиях.

Спасибо за просмотр🥴