Typescript 基于Vue类的组件扩展和混合

您好，如何使用typescript在基于类的组件中转换此组件

<script>
import { Line } from 'vue-chartjs'
import { chartLast30Days, chartStylingMethods } from '#/mixins'
import { myChartOptions } from '#/const/charts'

export default {
    extends: Line,
    mixins: [chartLast30Days, chartStylingMethods],
    props: { chartPointsDownloads: Array, chartPointsPlays: Array, chartPointsSales: Array },        
}
</script>

从“vue chartjs”导入{Line}
从“#/mixins”导入{chartLast30Days，chartStylingMethods}
从“#/const/charts”导入{myChartOptions}
导出默认值{
扩展：行，
混合：[ChartLast30天，ChartStyleingMethods]，
道具：{chartPointsDownloads:Array，chartPointsPlays:Array，chartPointsSales:Array}，
}

我可以提供一些代码示例，用于使用vue属性装饰器创建基于类的组件、扩展类和使用mixin

Vue组件，基于类： 将mixin注入组件：

从“Vue属性装饰器”导入{Component，Vue}；
从“/MyClass”导入MyClass；
从“/MyMixin”导入MyMixin；
@组成部分({
mixin:[MyMixin]
})
导出默认类MyExtendingClass扩展MyClass{
创建（）{
log（“创建的MyExtendingClass”）；
console.log（this.myMixinValue）；
}
}

查看此信息，我有一个基于类的typescript中的vue项目。并尝试创建简单的扩展。基于您的代码，如果

MyClass

是一个纯

.ts

文件，那么它的工作很简单。在类似您的示例的情况下，当您将一些

public foo:string='some value'

添加到

MyClass

，它将在

MyExtendingClass

中不可见。知道为什么吗？也许你的转换器（webpack、vue cli、typescript）会忽略vue文件以转换为JS？如果在vue文件中编写typescript，则脚本标记为导入-->我需要向所有组件添加一些属性和方法。首选哪种方法？混合还是遗传？

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class MyClass extends Vue {
    created() {
        console.log("Created MyClass");
    }
}
</script>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyClass from './MyClass';
@Component
export default class MyExtendingClass extends MyClass {
  created() {
    console.log("Created MyExtendingClass");
  }
}
</script>

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class MyMixin extends Vue {
  myMixinValue = 'Fetch my mixin';
}

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyClass from './MyClass';
import MyMixin from './MyMixin';
@Component({
  mixins: [MyMixin]
})
export default class MyExtendingClass extends MyClass {
  created() {
    console.log("Created MyExtendingClass");
    console.log(this.myMixinValue);
  }
}
</script>