javascript - 在 TypeScript 中扩展 Vuetify 组件

Question

我正在尝试使用 TypeScript 中设置的一些默认 Prop 来扩展 vuetify 组件。在 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"
      }
  }
}

Answer 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>