Vue+ts 如果将组件导出

我在试着用ts结合vue写东西。由于是初学,对ts还不是很了解。现在遇到了一个问题。

我有个基础组件
类似于:

<template>
  <div class="hello">
    <h1>{{ msg | myf }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'HelloWorld',
  filters: {
    myf(val: string) {
      return `${val}+++`
    }
  }
})
export default class HelloWorld extends Vue {
  @Prop({
    type: String,
    default: 'Hello~~'
  })
  msg!: string
}

然后我在同级目录新建了一个 index.ts 文件负责导出组件

// index.ts

import HelloWorld from './HelloWorld.vue'

HelloWorld.install = (Vue: any) => {
  Vue.component(HelloWorld.name, HelloWorld)
}

export default HelloWorld

但是这个时候 .install 报错了。

image.png

网上查了一些,没查到解决办法。

我就是想问:

  1. 这个问题咋解决?
  2. 这个写法是js的写法,用ts是不是要换个写法?
  3. 这个问题的根在哪?
已解决 悬赏分:70 - 解决时间 2021-11-28 03:40
反对 0举报 0 收藏 0

回答2

最佳
  • @
    HelloWorld.install

    改为:

    (HelloWorld as any).install

    就可以了

    你可以把HelloWorld当前一个对象,但是这个对象里面原本没有install方法,你现在要给它添加这个方法。原来同下
    `
    let obj = {};
    // obj是一个空对象,现在给它添加一个“a”属性
    // ts就相当于加了一个类型判断,因为obj是Object类型的,但是Object类型中没有a属性,ts中any代表的是任意类型,这里就做了一个类型转换
    obj.a = 1;
    `

    支持 0 反对 0 举报
    2021-11-27 05:45
  • @
    这个问题咋解决?

    image.png

    这个写法是js的写法,用ts是不是要换个写法?

    ts只是在js基础上加类型而已

    这个问题的根在哪?

    根在shims-vue.d 它把所有vue文件导出的东西的类型都标记为VueConstructor<T>

    支持 0 反对 0 举报
    2021-11-27 06:15