Что такое union в TypeScript

Вопрос

Что такое union в TypeScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает концепцию union в TypeScript, знает, как её использовать, и может привести примеры из реальной практики.

Ключевые тезисы

• Union — это тип, который позволяет переменной или параметру принимать несколько типов данных.
• Определяется с помощью символа |, например: string | number означает, что значение может быть либо строкой, либо числом.
• Union полезен в случаях, когда функция или переменная должна работать с несколькими типами данных.
• TypeScript обеспечивает безопасность типов, проверяя допустимые операции для каждого типа в union.
• Пример использования: функция, которая принимает строку или число и возвращает их длину или строковое представление.

Подробный ответ

Union в TypeScript — это тип, который позволяет переменной, параметру функции или возвращаемому значению принимать несколько типов данных. Это особенно полезно в случаях, когда функция или переменная должна работать с различными типами данных, но при этом сохранять безопасность типов. Union определяется с помощью символа |, который разделяет допустимые типы. Например, string | number означает, что значение может быть либо строкой, либо числом. TypeScript автоматически проверяет допустимые операции для каждого типа в union, что помогает избежать ошибок во время выполнения. Например, если у вас есть переменная типа string | number, TypeScript не позволит вам вызвать метод toUpperCase(), если он не уверен, что значение действительно является строкой. Это делает код более безопасным и предсказуемым.

Практические примеры

Пример 1

Пример использования union в функции, которая принимает строку или число и возвращает их длину или строковое представление:

function getLength(value: string | number): number {
  if (typeof value === 'string') {
    return value.length;
  } else {
    return value.toString().length;
  }
}

console.log(getLength('Hello')); // 5
console.log(getLength(12345)); // 5

Пример 2

Пример использования union с пользовательскими типами:

type Car = {
  brand: string;
  speed: number;
};

type Bicycle = {
  brand: string;
  gears: number;
};

function getBrand(vehicle: Car | Bicycle): string {
  return vehicle.brand;
}

const car: Car = { brand: 'Tesla', speed: 250 };
const bicycle: Bicycle = { brand: 'Giant', gears: 21 };

console.log(getBrand(car)); // Tesla
console.log(getBrand(bicycle)); // Giant

Частые ошибки

• Типичная ошибка — попытка использовать метод, который доступен не для всех типов в union без проверки типа. Например, если у вас есть переменная типа string | number, и вы попытаетесь вызвать toUpperCase() без проверки, TypeScript выдаст ошибку. Это связано с тем, что метод toUpperCase() доступен только для строк, но не для чисел.
• Другая распространенная ошибка — путаница между union и intersection. Union (|) позволяет использовать любой из указанных типов, тогда как intersection (&) требует, чтобы значение соответствовало всем указанным типам одновременно.

Связанные темы

• Intersection в TypeScript — это тип, который объединяет несколько типов в один. Например, type A = { a: string }; type B = { b: number }; type C = A & B; означает, что тип C должен содержать и a, и b.
• Type Guards — это механизм в TypeScript, который позволяет проверять тип переменной во время выполнения. Например, с помощью typeof или instanceof можно определить тип переменной и выполнить соответствующие действия.

Follow-up вопросы

Можете привести пример использования union в реальном проекте?

Уровень: basic

В проекте я использовал union для обработки данных API, где ответ мог быть либо строкой, либо числом. Например, функция parseResponse принимала string | number и возвращала соответствующее значение.

Как TypeScript проверяет типы в union?

Уровень: intermediate

TypeScript использует механизм сужения типов (type narrowing) для проверки допустимых операций. Например, внутри условия if (typeof value === 'string') TypeScript будет рассматривать value как строку.

Что произойдет, если попытаться использовать метод, не доступный для всех типов в union?

Уровень: intermediate

TypeScript выдаст ошибку, так как метод должен быть доступен для всех типов в union. Например, value.length вызовет ошибку, если value — это string | number, так как у числа нет свойства length.

Чем union отличается от intersection?

Уровень: advanced

Union позволяет объединить несколько типов, чтобы значение могло быть одним из них, а intersection объединяет свойства нескольких типов в один. Например, string | number — это union, а A & B — intersection.

Как можно использовать union с пользовательскими типами?

Уровень: intermediate

Union можно использовать с пользовательскими типами, например, type Status = 'success' | 'error'. Это позволяет ограничить допустимые значения переменной конкретными строками.