Что такое Type Guard

Вопрос

Что такое Type Guard

Профессия

Frontend Developer

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

Интервьюер хочет убедиться, что кандидат понимает, как TypeScript обеспечивает безопасность типов во время выполнения, и знает практические способы сужения типов. Также важно, чтобы кандидат мог привести примеры использования Type Guard в реальных проектах.

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

• Type Guard — это механизм в TypeScript, который позволяет сужать тип переменной внутри определенной области кода (например, в условии if).
• Type Guard помогает TypeScript корректно определять тип переменной на этапе компиляции, что повышает безопасность кода.
• Примеры Type Guard: typeof, instanceof, пользовательские функции с предикатом типа (например, function isString(value: unknown): value is string).
• Type Guard особенно полезен при работе с union-типами или unknown, когда нужно проверить конкретный тип перед выполнением операций.

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

Type Guard — это механизм в TypeScript, который позволяет сужать тип переменной внутри определенной области кода, например, в условии if. Это помогает TypeScript корректно определять тип переменной на этапе компиляции, что повышает безопасность кода и предотвращает ошибки, связанные с неправильным использованием типов. Type Guard особенно полезен при работе с union-типами или unknown, когда нужно проверить конкретный тип перед выполнением операций. Например, если у вас есть переменная, которая может быть строкой или числом, Type Guard позволяет убедиться, что это действительно строка, прежде чем вызывать методы, специфичные для строк. Основные типы Type Guard включают встроенные операторы, такие как typeof и instanceof, а также пользовательские функции с предикатом типа. Встроенные Type Guard просты в использовании и эффективны для базовых типов данных, в то время как пользовательские функции позволяют проверять более сложные структуры данных.

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

Пример 1

javascript
Пример использования typeof: function printValue(value: string | number) {
  if (typeof value === 'string') {
  console.log(value.toUpperCase());
}
else {
  console.log(value.toFixed(2)); } }

Пример 2

Пример пользовательского Type Guard: interface Cat { meow(): void; } interface Dog { bark(): void;
}
function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}
function handleAnimal(animal: Cat | Dog) {
  if (isCat(animal)) { animal.meow();
}
else { animal.bark(); } }

Пример 3

Пример работы с union-типами: type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; sideLength: number }; function getArea(shape: Shape): number { if (shape.kind === 'circle') { return Math.PI * shape.radius ** 2; } else { return shape.sideLength ** 2; } }

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

• Использование Type Guard без предиката типа в пользовательских функциях, что может привести к неправильному определению типа.
• Путаница между Type Guard и type assertion (as). Type Guard проверяет тип, а type assertion просто утверждает, что тип определенный, без проверки.

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

• Union-типы в TypeScript
• Type assertion (as)
• Работа с unknown и any в TypeScript
• Предикаты типов в TypeScript

Follow-up вопросы

Приведи пример использования typeof в качестве Type Guard.

Уровень: basic

Пример: if (typeof value === 'string') { console.log(value.toUpperCase()); }. Здесь TypeScript понимает, что внутри блока if value имеет тип string, и позволяет вызывать методы строк.

Как создать пользовательский Type Guard?

Уровень: intermediate

Пользовательский Type Guard — это функция, которая возвращает предикат типа. Например: function isNumber(value: unknown): value is number { return typeof value === 'number'; }. Если функция возвращает true, TypeScript сужает тип переменной.

В чем разница между Type Guard и type assertion (as)?

Уровень: intermediate

Type Guard проверяет тип во время выполнения и сужает его безопасно, тогда как type assertion (as) — это принудительное приведение типа без проверки. Type Guard предпочтительнее, так как он обеспечивает безопасность типов.

Как Type Guard помогает при работе с union-типами?

Уровень: basic

Type Guard позволяет проверить, какой именно тип из union-типа имеет переменная, и безопасно работать с ней внутри соответствующей области. Например: if ('length' in value) { ... } для проверки на массив или строку.

Можно ли использовать Type Guard для проверки сложных пользовательских типов?

Уровень: advanced

Да, для этого используют пользовательские Type Guard с предикатами. Например, можно проверить, что объект соответствует интерфейсу: function isUser(obj: unknown): obj is User { return 'name' in obj && 'age' in obj; }.