Search
Write a publication
Pull to refresh

Почему вы должны писать на TypeScript в 2023 году?

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

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

  • Еще у TypeScript есть компилятор (транспайлер), который проверяет код на ошибки и помогает их исправить до выхода в продакшен.

  • TypeScript использует последние возможности JavaScript, которые поддерживают не все браузеры. Но при этом в TypeScript можно безопасно использовать весь потенциал JavaScript, не переживая за совместимость: в результате код будет скомпилирован в максимально совместимый со всеми браузерами JavaScript.

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

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

Stack Overflow Developer Survey 2022 - Рейтинг самых любимых языков программирования
Stack Overflow Developer Survey 2022 - Рейтинг самых любимых языков программирования

В этой небольшой статье я хотел бы изложить основные особенности и преимущества 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 и прочих поддерживаемых технологиях.

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

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.