我正在尝试在我的Nuxt项目上提供打字脚本支持。
我知道在返回组件数据时必须使用Vue.extend
,如下所示:
import Vue from 'vue';
type Data = {
a: number
}
export default Vue.extend({
data():Data{
const a = 3;
return {
a
}
}
})
但是,如果我的组件有注入的属性,它不会将这些属性附加到this
类型。
import Vue from 'vue';
type Data = {
a: number
}
export default Vue.extend({
inject: ['b'],
data():Data{
const a = 3;
const c = this.b
^^^^
// ~~ Property 'b' does not exist on type 'Readonly<Record<never,any>> & Vue'
return {
a
},
methods:{
my_method(){
this.a // no problem here
this.b // Error here
}
}
}
})
不应该也推断出注入类型吗?
我被迫用途:
const that = this as any;
我想避免的事
4条答案
按热度按时间pdsfdshx1#
您可以尝试在
data
方法中显式键入this
Playground
你可以看看
Vue.extends
类型定义:因此,您可以提供显式泛型:
sh7euo9m2#
使用
vue-class-component
和vue-property-decorator
。通过使用这些库,您可以编写像这样的强大的类型脚本代码。
nuxt-property-decorator
也合并上述库,使其更简单。ybzsozfc3#
我也遇到了这种情况,这是我找到的解决方案:你应该像下面这样为nuxt写一个插件,并将其添加到插件部分的nuxt.config中。
所以对于第一个创建对象,Vue.extend
然后导出configure plugin函数如下:
这里有三个步骤,你应该这样做,这个组件是全球可用的。
1.为nuxt注册created一个钩子,等待nuxt准备就绪。
1.当组件在beforeCreate准备就绪时,分配nuxt $root对象,您可以通过VueContructor options设置。
1.使服务全局化,以便通过Object. defineProperty通过$myService进行访问。
在这个例子中,我使用了存储变量loggedIn的watch。这里我也使用了typed-vuex,所以$accessor是一个全局访问器。逻辑很简单,我等待用户登录,然后我做一些事情。
享受您的定制组件!
gg0vcinb4#
是
Nuxt3
吗?一定要换
到