javascript - 在 TypeScript 中扩展 Vuetify 组件

我正在尝试在 TypeScript 中扩展一个 Vuetify 组件，并设置一些默认的 props。在 JavaScript 中它工作得非常好，但我无法弄清楚如何在 TS 中扩展组件。以下是 JS 中组件的代码：

import { VTextField } from 'vuetify/lib'

export default {
  name: "my-text-field",
  extends: VTextField,
  props: {
      "hide-details": {
        type: Boolean,
        default: true
      },
      outlined: {
        type: Boolean,
        default: true
      },
      dense: {
        type: Boolean,
        default: true
      },
      "single-line": {
        type: Boolean,
        default: true
      },
      color: {
        type: String,
        default: "secondary"
      }
  }
}

答案＃1

在 tsconfig.json 中添加的正确方法

// tsconfig.json

{
  "compilerOptions": {
    "types": ["vuetify"]
  }
}

现在只需扩展必要的组件。

<script lang="ts">
import { VTextField } from 'vuetify/lib'

import { Component,  Prop } from 'vue-property-decorator'

@Component({})
export default class TextField extends VTextField {
    @Prop({default: 'auto'}) private hideDetails!: boolean|string;
    @Prop({default: true}) private outlined!: boolean;
    @Prop({default: true}) private dense!: boolean
    @Prop({default: true}) private singleLine!: boolean;
    @Prop({default: 'secondary'}) private color!: string
}
</script>

答案＃2

我通过查看 Vuetify 的 VTextArea 组件找到了一个解决方案。以下是我的解决方案：

import Vue from 'vue'
//@ts-ignore
import VTextField from 'vuetify/lib/components/VTextField/VTextField'

// Create Base Mixins and Define Custom Properties
const base = Vue.extend({ mixins: [VTextField] })
export default base.extend({
  name: "my-text-field",
  props: {
      hideDetails: {
        type: Boolean,
        default: true
      },
      outlined: {
        type: Boolean,
        default: true
      },
      dense: {
        type: Boolean,
        default: true
      },
      singleLine: {
        type: Boolean,
        default: true
      },
      color: {
        type: String,
        default: "secondary"
      }
  }
})