Свойство ‘value’ не существует в типе при использовании интерфейса TypeScript с Vue3 Ref

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

Свойство ‘value’ не существует в типе при использовании интерфейса TypeScript с Vue3 Ref

interface Worker {
  workerId: number;
  name: string;
  phoneNumber: string;
  managerId: number;
  subordinates: number[];
}

const workers = ref<Worker[]>([]);

function fetchWorkers() {
  try {
    fetch(`MY-API-ENDPOINT`).then(async (response) => {
      const data = await response.json();

      workers.value = data as Worker[]; 
    });
  } catch (error) {
    ...
  }
}

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

Ошибка, с которой вы столкнулись — "Property ‘value’ does not exist on type ‘Worker[]’" — появляется из-за того, что вы пытаетесь присвоить значение workers.value как если бы workers был обычным массивом, в то время как на самом деле workers — это Ref.

В Vue 3 и TypeScript, когда вы используете ref, нужно помнить, что значение, обернутое в ref, доступно через свойство .value. Давайте рассмотрим ваш код и исправим его шаг за шагом.

1. Убедитесь, что вы правильно импортировали ref из Vue.
2. Убедитесь, что в вашем коде вы используете workers.value.

Вот как должен выглядеть исправленный вариант вашего кода:

import { ref } from 'vue';

interface Worker {
  workerId: number;
  name: string;
  phoneNumber: string;
  managerId: number;
  subordinates: number[];
}

const workers = ref<Worker[]>([]);

async function fetchWorkers() {
  try {
    const response = await fetch(`MY-API-ENDPOINT`);
    const data = await response.json();

    // Убедитесь, что полученные данные действительно соответствуют интерфейсу Worker[]
    workers.value = data as Worker[]; 
  } catch (error) {
    console.error('Ошибка при загрузке работников:', error);
  }
}

Разбор изменений:

1. Импортирование ref: Убедитесь, что вы импортируете ref из Vue, иначе ref будет неопределён.
2. Асинхронная функция: Я изменил fetchWorkers на async и использовал await для fetch, что делает код более читаемым и проще для обработки ошибок.
3. Присвоение значения: Теперь вы правильно присваиваете workers.value, что и требуется для работы с Ref.

Дополнительно:

• Проверьте, чтобы ваш API действительно возвращал массив данных, которые соответствуют интерфейсу Worker. Это поможет избежать ошибок времени выполнения, если структура данных не совпадает с ожидаемой.
• Обязательно обрабатывайте ошибки сети, чтобы не оставить пользователя в неведении о том, что что-то пошло не так.

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