vue2.0 ts项目中, 父组件如何定义补全子组件类型，调用它的方法及成员？

Question

用@ref试了下不能补全与识别方法。

    import TempTable from './TempTable.vue'
    export default ******* {
        @Ref('mytable') mytable !: TempTable
        onTest() {
            this.mytable.selectedRowKeys = [] // 报错
        }
    }

this.mytable这样不能补全与提示类型。还报错。

TS2339: Property 'selectedRowKeys' does not exist on type 'Vue'.

还是识别为一个vue类型。

Answer 1

因为你导入的对象的 TS 类型是 Vue。

还记得你在 shims-vue.d.ts 里加的吗：

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

正确的做法应是给组件补充单独的声明文件。

比如在 TempTable.d.ts 中（一定要是 .d.ts 不能是 .ts）：

/// <reference types="vue" />
// 上面那句是有用的，不是注释

declare interface TempTable extends Vue {
    selectedRowKeys: string[];
}

然后导入：

// 这里要换个名了，不能是刚刚声明的 TempTable
import TempTableComponent from './TempTable.vue';

@Component({
    components: {
        TempTableComponent
    }
})
export default ******* {
    @Ref('mytable')
    public mytable !: TempTable // 这里是 TempTable
    
    private onTest() {
        this.mytable.selectedRowKeys = [];
    }
}