Vue.js 装饰器和 moment.js 打字稿

Question

将 vue.js 与带有 vue 装饰器的 moment.js 库一起使用时出现打字稿错误。它只出现在 class 的 prop 部分内。

import * as moment from 'moment';

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

@Component({
  name: 'TestMoment',
  props: {
    tomorrow: moment.Moment,
  }
})
export default class TestMoment extends Vue {
  private date: moment.Moment = moment();
  public created() {
    console.log(this.date);
  }
}

具体错误在明天属性，我得到：

Property 'Moment' does not exist on type 'typeof moment'. Did you mean 'isMoment'?

我有一个编辑器可以突出显示错误，鼠标悬停在 tomorrow 行的 moment 上表示错误，但不在 private date...

行

Answer 1

type of a VueJS prop must be a native constructor：在这种情况下，您应该使用Object代替，即：

@Component({
  name: 'TestMoment',
  props: {
    tomorrow: Object,
  }
})

tomorrow 属性是 typeof object 并且是 moment 的实例，因此您可以使用更具声明性的 @Prop 装饰器执行以下检查，通过提供自定义验证器函数：

import * as moment from 'moment';
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';

@Component({
  name: 'TestMoment',
  props: {
    tomorrow: moment.Moment,
  }
})
export default class TestMoment extends Vue {
  @Prop({ type: Object, validator: moment.isMoment })
  public readonly tomorrow!: moment.Moment;

  private date: moment.Moment = moment();
  public created() {
    console.log(this.date);
  }
}

您还可以选择在返回对象的类型上提示 TypeScript，使用 type: Object as () => moment.Moment:

import * as moment from 'moment';
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';

@Component({
  name: 'TestMoment',
})
export default class TestMoment extends Vue {
  @Prop({ type: Object as () => moment.Moment, validator: moment.isMoment })
  public readonly tomorrow!: moment.Moment;

  private date: moment.Moment = moment();
  public created() {
    console.log(this.date);
  }
}

Answer 2

Moment 构造函数未从包中导出并保持私有。 Moment is an interface 并且在运行时不存在，但它应该存在才能作为属性值提供：

  props: {
    tomorrow: moment.Moment,
  }

Moment 对象可以自然地作为带有验证器的 prop 提供：

  props: {
    tomorrow: {
      type: Object,
      validator: moment.isMoment
    }
  }

并且可以提取 Moment 构造函数以使道具通过 instanceof 运行时检查：

const Moment = moment.fn.constructor as { new(): typeof moment };

...

  props: {
    tomorrow: Moment,
  }

Vue.js 装饰器和 moment.js 打字稿

Vue.js decorators and moment.js with typescript

typescript

vue.js