Vue+ts 如果将组件导出

Question

我在试着用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 报错了。

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

我就是想问：

1. 这个问题咋解决？
2. 这个写法是js的写法，用ts是不是要换个写法？
3. 这个问题的根在哪？

Answer 1

HelloWorld.install

改为：

(HelloWorld as any).install

就可以了

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

Answer 2

这个问题咋解决？

这个写法是js的写法，用ts是不是要换个写法？

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

这个问题的根在哪？

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