为什么在.vue 中声明的基于ts-class 的vue-component 的静态方法只能在.vue 的脚本块中工作？

Question

为什么在.vue 中声明的基于ts-class 的vue-component 的静态方法只能在.vue 的脚本块中工作？

重现步骤

1. 使用 vue-cli3 初始化一个 typescript 项目并添加 shims-vue.d.ts

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

2. 在您的项目中添加Comp.vue文件，如下所示

// Comp.vue 
<template>
  <div></div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Comp extends Vue {
  mounted() {

  }
  created(){

  }
  static notWorkFunc(){
    //anything
  }
}

export function anotherNotWorkFunc(){
  //anything
}
</script>

3. 使用以下特定代码在您的项目中添加test.ts和test.vue

测试.vue

<script lang="ts">
import ComP,{anotherNotWorkFun} from "./Comp.vue";
ComP.notWorkFunc()
anotherNotWorkFun()
</script>

测试文件

import ComP,{anotherNotWorkFun} from "./Comp.vue";
ComP.notWorkFunc()
anotherNotWorkFun()

如你看到的

在.ts 中不起作用

在.vue工作

我不知道原因...

存储库是https://github.com/WilkinWendy/vue-ts-problem 。

演示代码在 ./src/demo

供参考

Answer 1

我认为.vue文件中的.vue类组件实际上被编译为 Vue 选项对象，这就是它们的导出方式。 我们在项目中.vue是在.vue文件中我们只有模板，在底部我们有对代码隐藏文件的外部引用。 例子：

<!-- Comp.vue -->
<template>
  <div></div>
</template>
<script lang="ts" src="./Comp.ts"></script>
<style lang="scss" src="./Comp.scss"></style>

然后我们执行以下操作：

// Comp.ts
import { Component } from "vue-property-decorator";

export const SOME_CONST = "SomeValue";

@Component
export class Comp extends Vue{
  public static method(): boolean {
    return true;
  }
}

export default Comp;

这似乎对我们有用，实际上 VSCode/Vetur/TypeScript 这样的性能要好得多。 此外，当 UX 人员处理 CSS/HTML 时，他们不必接触.ts文件。