Блог

Мой проект загружает сторонние скрипты, которые также добавляют называемый компонент icon . Эти сторонние скрипты не находятся под моим контролем и загружаются владельцем сайта, который я также не контролирую.

С учетом сказанного, с точки зрения функциональности он работает без каких-либо проблем, единственное, что IDE не может правильно интерпретировать этот компонент, так каковы мои варианты?

 <template>
  <div>
    <!-- ... -->
    <icon
        icon="fa-check"
        :loading="isLoading"
    />
    <!-- ... -->
  </div>
</template>
 

 <script lang="ts">
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  name: 'SomeComponent',
  // ...
});
</script>
 

Вывод IDE:

Как я могу правильно отобразить это для IDE, чтобы компилятор не сошел с ума? Я уже пробовал это, но, очевидно, я понятия не имею, как я могу этого достичь:

 <script lang="ts">
import { defineComponent } from '@vue/composition-api';

interface Icon {
  loading: boolean;
}

export default defineComponent({
  name: 'SomeComponent',
  components: {
    'icon': Icon
  },
  // ...
});
</script>
 

 ERROR in /path/to/SomeComponent.vue(xx,xx):
xx:xx 'Icon' only refers to a type, but is being used as a value here.
    xx |   },
    xx |   components: {
  > xx |     'icon': Icon
       |             ^
    xx |   },