Деструктуризация объектов и назначение типа

Вопрос или проблема

const artworkTypeId = getValues().artwork_type_id as number;
const finishId = getValues().finish_id as number;
const productId = getValues().product_id as number;
const quantity = getValues().quantity as number;

const artworkTypeId = getValues().artwork_type_id as number;

const { 
  artwork_type_id: artworkTypeId,
  finish_id: finishId
}: { 
  artwork_type_id: number,
  finish_id: number
} = getValues();

{
    "product_id": "21",
    "artwork_type_id": 1,
    "quantity": "100",
    "finish_id": "3"
}

Ответ или решение

Деструктуризация объектов и присвоение типов в TypeScript: анализ проблемы

В данном ответе подробно рассмотрим проблему, с которой вы столкнулись при деструктуризации объекта, получаемого от функции getValues(), используемой в React Hook Form. Приведенный вами код демонстрирует, как правильно присвоить значения переменным, а также почему возникает ошибка при попытке деструктурировать объект.

Исходный код

У вас есть такой код, который работает:

const artworkTypeId = getValues().artwork_type_id as number;
const finishId = getValues().finish_id as number;
const productId = getValues().product_id as number;
const quantity = getValues().quantity as number;

Это явное приведение типов работает, потому что TypeScript не проверяет структуру объекта в этом случае, а просто рассматривает данные как любые (any). Но когда вы пытаетесь использовать деструктуризацию с указанием типов, возникает ошибка.

Ошибка деструктуризации

Когда вы пишете:

const { 
  artwork_type_id: artworkTypeId,
  finish_id: finishId
}: { 
  artwork_type_id: number,
  finish_id: number
} = getValues();

TypeScript сообщает вам об ошибке:

Property 'artwork_type_id' is missing in type 'FieldValues' but required in type '{ artwork_type_id: number; }'

Эта ошибка возникает из-за того, что TypeScript не может гарантировать, что ваш объект, возвращаемый getValues(), действительно содержит свойства artwork_type_id и finish_id в том виде, в каком вы их запрашиваете. getValues() может возвращать объект с различными свойствами, и TypeScript ожидает, что тип возвращаемого значения будет как минимум содержать те поля, которые вы указываете.

Как исправить ошибку

Чтобы устранить эту проблему, вам необходимо явно указать, каков возвращаемый тип от функции getValues(). Можно сделать это несколькими способами:

1. Объявление интерфейса для типа значений:

   Определите интерфейс, который будет представлять ожидаемые значения:

   interface FormValues {
    product_id: number;
    artwork_type_id: number;
    quantity: number;
    finish_id: number;
   }

   Затем вы можете использовать этот интерфейс следующим образом:

   const { 
    artwork_type_id: artworkTypeId,
    finish_id: finishId 
   }: FormValues = getValues() as FormValues;

2. Убедитесь, что getValues() возвращает правильный тип:

   Если getValues() является частью библиотеки, убедитесь, что в библиотеке правильно определены типы. Если у вас есть возможность изменить сигнатуру функции или создать обертку, которую вы можете свободно типизировать, это будет хорошим вариантом.

3. Использовать более менее строгое приведение типа:

   Если вы уверены в возвращаемых значениях, но не хотите создавать интерфейсы для каждого объекта, можно использовать as any, но это не лучший способ с точки зрения безопасности типов.

Заключение

Проблемы деструктуризации в TypeScript могут быть связаны с неявностью типов, когда используется динамическое значение. Явное указание типов, таких как интерфейсы, может значительно упростить работу с данными и избежать ошибок во время компиляции. Установка четкого контракта между возвращаемым объектом и тем, как вы планируете его использовать, поможет обеспечить безопасность типов и улучшить читаемость кода.

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