vue 使用更好的类型来模拟属性类型,

deikduxw  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(50)

版本

2.5.13

复现链接

https://github.com/zsky/vue-date-type-issue

复现步骤

npm i
npm run build

预期结果

没有类型错误

实际发生的情况

Typescript报告错误:属性'getTime'在类型'string'上不存在。我使用Vue和Typescript,我想将组件的prop类型设置为Date,所以我这样做:

Vue.extend({
  props: { start: Date },
  created() { 
     this.start;  // Expect type Date, but String
  }
});

然后我发现有一些有用的东西:
在options.d.ts中,

export type Prop<T> = { (): T } | { new (...args: any[]): T & object }

做一个简单的测试:

function test<T>(opts: { p1: Prop<T> }): T {
    return {} as T;
}
let result = test({ p1: Date });  // Expect type Date, but String

但是我仍然不知道如何解决这个问题,感谢任何建议。

41zrol4v

41zrol4v1#

问题出在 DateConstructor

interface DateConstructor {
    new(): Date;
    (): string;
}

调用签名返回了 string ,因此TS得到了错误的推断。我认为最好的解决方案是在TS 2.8中等待条件类型。cc @ktsn

1hdlvixo

1hdlvixo2#

是的,似乎我们无法在没有条件类型的情况下处理DateConstructor。
仅供参考,您现在可以手动注解它:

Vue.extend({
  props: { 
    start: Date as new () => Date
  },
  created() { 
     this.start;
  }
});
bvhaajcl

bvhaajcl3#

我通过使用PropType

import Vue, { PropType } from 'vue';
Vue.extend({
  props: { 
    start: Date as PropType<Date>
  },
  created() { 
     this.start.getMonth();
  }
});

来解决这个问题。

hrysbysz

hrysbysz4#

对于这两个示例:

start: Date as new () => Date,

我正在结束日期*_*

var Date: DateConstructor
Enables basic storage and retrieval of dates and times.

Parsing error: Unexpected token, expected ","

相关问题