Что такое Record в TypeScript

Вопрос

Что такое Record в TypeScript

Профессия

Frontend Developer

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

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

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

• Record — это утилита (utility type) в TypeScript, которая позволяет создавать тип для объекта с заданными типами ключей и значений.
• Синтаксис: Record<Keys, Type>, где Keys — тип ключей (обычно string, number или symbol), а Type — тип значений.
• Полезен для описания объектов с динамическими ключами, но фиксированным типом значений, например, словарей или конфигураций.
• Пример: const colors: Record<string, string> = { red: '#ff0000', green: '#00ff00' };

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

Record — это встроенный utility type в TypeScript, который позволяет создавать тип для объектов с фиксированным типом значений, но динамическими ключами. Это особенно полезно, когда вам нужно описать объект, где ключи могут быть различными, но все значения должны быть одного типа. Например, это может быть словарь цветов, где ключи — названия цветов, а значения — их HEX-коды. Синтаксис Record выглядит как Record<Keys, Type>, где Keys — это тип ключей (обычно string, number или symbol), а Type — тип значений. Record отличается от обычного index signature ({ [key: string]: Type }) тем, что он более универсален и позволяет явно указать тип ключей, что делает код более читаемым и безопасным. Record можно использовать для описания конфигураций компонентов, когда у вас есть набор ключей, которые могут быть динамическими, но значения должны соответствовать определенному типу. Однако, Record не подходит для случаев, когда вам нужно описать объект с необязательными свойствами или когда тип значений может варьироваться.

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

Пример 1

Пример использования Record для создания словаря цветов: `const colors: Record<string, string> = { red: '#ff0000', green: '#00ff00' };`

Пример 2

Пример использования Record для описания конфигурации компонентов: `const componentConfig: Record<string, { title: string, icon: string }> = { button: { title: 'Click Me', icon: 'arrow' }, input: { title: 'Enter Text', icon: 'pencil' } };`

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

• Ошибка: Использование Record для объектов с необязательными свойствами. Record не поддерживает необязательные свойства напрямую, и попытка использовать его в таких случаях может привести к ошибкам типизации.
• Ошибка: Использование Record для описания объектов с различными типами значений. Record требует, чтобы все значения были одного типа.

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

• Index Signatures в TypeScript
• Utility Types в TypeScript
• Generics в TypeScript

Follow-up вопросы

Можно ли использовать Record для ключей, которые не являются string или number?

Уровень: intermediate

Да, Record поддерживает любые типы ключей, включая symbol и даже union types. Например: type Keys = 'a' | 'b'; const obj: Record<Keys, number> = { a: 1, b: 2 };

Чем Record отличается от обычного index signature ({ [key: string]: Type })?

Уровень: basic

Record явно указывает тип ключей и значений, что делает код более читаемым и безопасным. Index signature менее строгий и не ограничивает конкретные типы ключей.

Как бы вы использовали Record для описания конфигурации компонентов?

Уровень: intermediate

Record удобен для динамических конфигураций. Например: type ComponentConfig = Record<string, { color: string; size: number }>; позволяет хранить настройки компонентов по их именам.

Какие ограничения есть у Record и когда его не стоит использовать?

Уровень: advanced

Record не подходит, если нужны разные типы значений для разных ключей. В таких случаях лучше использовать mapped types или discriminated unions.

Как Record работает с optional полями? Можно ли создать Record с необязательными свойствами?

Уровень: intermediate

Сам по себе Record не поддерживает optional поля, но можно комбинировать с Partial: type OptionalRecord = Partial<Record<string, number>>;.