логотип PurpleSchool

Type в TypeScript

Автор

Вячеслав Руденко

Введение

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

TypeScript позволяет определять псевдонимы типов с помощью ключевого слова type

type Id = string | number;
const orderId: Id = 5;

Картежи

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

type divisionType = [number, string];

function divide(a: number, b: number): divisionType {
  if (b === 0) {
    return [NaN, 'Деление на ноль невозможно'];
  } else {
    return [a / b, 'Успешное деление'];
  }
}

console.log(divide(15, 5)); // [3, "Успешное деление"]

Объявить новый кортеж с помощью interface нельзя. Это одна из ситуаций, когда операторы не взаимозаменяемы. Стоит добавить, что внутри интерфейса определять кортежи можно.

Определение Типовых Алиасов

С другой стороны, type в TypeScript позволяет создавать алиасы для сложных типов данных. Это особенно полезно, когда вы сталкиваетесь с объёмными типами, которые могут быть неудобными для повторного использования.

// Пример использования type для определения структуры пользователя
type User = {
  name: string;
  age: number;
  email: string;
};

// Пример использования алиаса
const newUser: User = {
  name: 'Анна',
  age: 28,
  email: 'anna@example.com',
};

Создание Составных Типов

type также позволяет создавать составные типы данных, комбинируя несколько типов в один. Эту задачу решает оператор амперсанд (&). Рассмотрим на примере:

// Создание составного типа для точных координат
type Coordinates = {
  x: number;
  y: number;
};

// Создание составного типа для точки с названием
type PointName = Coordinates & {name: string};

// Пример использования
const point: PointName = {x: 10, y: 20, name: 'Старт'};

Проблема поведения &-оператора в Typescript

Представим, что у нас есть два типа:

type TypeA = {key1: string; key2: null};
type TypeB = {key2: string; key3: number};

type TypeC = TypeA & secondType;

Тип TypeA определяет key2 как null, в то время как в типе TypeB это string. Typescript выводит это объединение несовместимых типов как never и тип TypeC просто перестаёт работать.

Работа с Шаблонами и Параметрами

type также позволяет создавать шаблоны и параметризованные типы, что обеспечивает гибкость и повторное использование кода.

// Создание шаблона для пары значений
type Pair<T, U> = {first: T; second: U};

// Пример использования
const pair: Pair<string, number> = {first: 'Привет', second: 42};

Условные Типы

С использованием type можно создавать условные типы данных, которые зависят от определенных условий или параметров.

type IsString<T> = T extends string ? 'yes' : 'no';

const yesString: IsString<string> = 'yes'; // Правильно
const noNumber: IsString<number> = 'no'; // Правильно
const noString: IsString<string> = 'no'; // Ошибка: Тип "no" нельзя присвоить типу "yes"
const yesNumber: IsString<number> = 'yes'; // Ошибка: Тип "yes" нельзя присвоить типу "no"

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

Заключение

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

изображение курса

TypeScript с нуля

Антон Ларичев
иконка часов18 часов лекций
иконка зведочки рейтинга4.8
Frontend
Backend
TypeScript с нуля