Как работает оператор in в TypeScript (именно в TS а на в JS)?
Есть следующий код:
const formData = {
firstName: 'John',
lastName: 'Doe',
age: 33,
id: 1234,
};
type validateForm = {
[key in keyof typeof formData]: boolean
};
// По сути этот код выше, создаёт тип следующего вида:
// type validateForm = {
// firstName: boolean,
// lastName: boolean,
// age: boolean,
// id: boolean,
// }
Вопрос №1.
В данном случае оператор typeof при объявлении типа, (не в исполняемом коде), работает иначе чем в JS, он приводит объект formData к типу.
Затем у полученного типа мы получаем ключи с помощью оператора keyof, по сути получаем строковый литерал firstName | lastName | age | id.
А вот что происходит дальше, не понятно.
Я так понимаю что здесь оператор in работает не так как в JavaScript и вызывает итерацию, с последовательной записью типа boolean в каждый ключ.
В документации ts не удаётся ничего найти про поведение оператора in, чтобы понять как он работает в TypeScript-е.
Вопрос №2. Почему вот этот код выдаёт ошибку?
type keys = key in keyof typeof formData;
// думал получить кортеж следующего вида type keys: ['firstName', 'lastName', 'age', 'id'], но получил ошибку
Ответы (1 шт):
Это называется Mapped Type (тип-отображение), специальный синтаксис позволяющий задать множество свойств на основе множества ключей. Отдельной от этой функциональности версии оператора in не существует. Если необходимо проитерироваться по юниону для этого можно использовать Distributive Conditional Type (распределённый условный тип). Если же необходимо получить именно кортеж, то простого способа для этого, к сожалению, не придумали. Можете посмотреть некоторые варианты решения здесь.