Блог

Что я хочу сделать, так это создать вычисленное значение для использования в моем представлении, так как в этой документации я пытаюсь:

У меня есть компонент, в котором я отправляю объект массива в виде:

 const tabs = ref([
      {
        imageSrc: '/programs/test1.png',
         ....
      },
 

И в другом компоненте я получаю его как :

 export default defineComponent({
  name: 'ProgramModal',

  props: {
    tabs: {
      type: Array as PropType<Array<any>>,
      required: true,
    },
  },


  computed: {
    img() {
      return `./images/modal/${encodeURIComponent(this.tabs.imageSrc)}.png`
    },
  },

})
 

Как вы можете видеть, у меня есть вычисленное значение, которое выдает две ошибки, одну в img , а другую в this.tabs.imageSrc :

Первая ошибка:

img неявно имеет тип возврата any, поскольку он не имеет аннотации типа возврата и прямо или косвенно упоминается в одном из возвращаемых выражений

Вторая ошибка:

Вкладки свойств не существуют для типа { img(): любой; }

Что я делаю не так? С уважением

Есть две проблемы:

1. Поддержка машинописного текста для API опций имеет известное ограничение, требующее аннотирования типов возвращаемых данных на computed :
   

   Из-за циклического характера файлов объявлений Vue у TypeScript могут возникнуть трудности с определением типов определенных методов. По этой причине вам, возможно, потребуется указать тип возвращаемого значения в методах, таких как render и в computed .

   Поэтому вы должны указать тип возвращаемого значения img() :

    img(): string {
             👆
     return `...`
   }
    

   Без исправления этой ошибки вывод типа для экземпляра компонента будет нарушен, что приведет к ошибке, которую вы заметили: Property tabs does not exist on type { img(): any; } .

2. Как указано в удаленном ответе здесь, this.tabs это массив, но ваша вычисляемая опора пытается считывать imageSrc данные непосредственно из массива, когда это действительно должно быть из элемента массива. Чтобы прочитать первый элемент массива imageSrc , используйте квадратные скобки с нулевым индексом ( this.tabs[0].imageSrc ):

    return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
                                                         👆
    

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

 export default defineComponent({
  computed: {
    img(): string {
      return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
    },
  },
})