Как я могу импортировать компонент класса Vue с правильными типами? - PullRequest
2 голосов
/ 17 января 2020

Если у меня есть однофайловый компонент класса Vue, например:

// MyComponent.vue
<template>
  <div></div>
</template>

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

И я импортирую его в другое место и получаю его экземпляр.

import MyComponent from "./MyComponent.vue";
...
const foo = ... as MyComponent;
foo.message = "goodbye";

При стандартной настройке Vue CLI 3 это выдает ошибку, поскольку содержит shims-vue.d.ts со следующим содержимым:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Как я понимаю, это означает, что всякий раз, когда вы пишете import Foo from "./Foo.vue", тогда Foo будет просто псевдонимом для Vue, и вы не сможете получить доступ к его членам.

Это действительно так, если вы импортируете из .ts файлов. Если вы импортируете из .vue файлов, это волшебным образом работает!

К сожалению, все мои тесты - это .spec.ts файлы, поэтому я не могу импортировать типы любых компонентов. Это затрудняет тестирование. Есть ли способ это исправить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...