New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Combine asyncData return type with Vue component data type. #48
Comments
@andoshin11 I might be wrong but I kind of understood you want to access import { Component, Vue } from 'vue-property-decorator'
@Component({
asyncData (this: MyPage, ctx) {
return {
test: this.bar() + this.foo // works & returns `foobar`
}
}
})
export default class MyPage extends Vue {
foo: string = 'bar'
bar () {
return 'foo'
}
} |
OR If you asked about having autocompletion/typechecking on the return of interface Test {
propertyOne: string
propertyTwo: string[]
}
@Component({
asyncData (this: PageIndex, ctx): Test {
return { // autocompletion/typecheck on the returned object
propertyOne: 'foo',
propertyTwo: ['bar', 'foo', 'bar']
}
}
})
export default class MyPage extends Vue implements Test {
propertyOne = ''
propertyTwo = []
} |
@andoshin11 Any updates around this issue ? I need more info |
@andoshin11 Any updates ? |
Closing due to ~5 months inactivity. |
Hi, I see this is closed but I'm running into the same issue, I think. I'm using the options API, but the problem remains the same. If I have this code: interface Test {
foo: string
bar: number
}
export default Vue.extend({
asyncData(): Test {
// this is syncronous to keep the example minimal but would be the same
return {
foo: 'hi',
bar: 1
}
},
methods: {
test() {
console.log(this.foo) // error here Property 'foo' does not exist on type…
}
}
}) I see you say this is not possible, but it's a pretty core feature of nuxt and I wonder how people overcome this in their projects. The only way I've found to overcome the issue is adapting that last code example to the options API, initialising the variables with the interface Test {
foo: string
bar: number
}
export default Vue.extend({
data(): Test {
return {
foo: '',
bar: 1
}
},
asyncData(): Test {
return {
foo: 'hi',
bar: 1
}
},
methods: {
test() {
console.log(this.foo)
}
}
}) Let me know if you want me to open a new issue. |
@nuria-fl The infered types from |
Maybe we can use type assertion to let TypeScript know our Vue instance's data type? Just like this: interface Test {
foo: string;
bar: number;
}
export default Vue.extend({
asyncData() {
return {
foo: 'hi'
};
},
data() {
return {
bar: 1
} as Test;
},
methods: {
test() {
console.log(this.foo);
}
}
}); This works for me. And I hope we can solve it in the coming Vue 3.0. |
I hope so. |
@odanado is it possible to place this into one file to re-use for every component? Not sure how modules and namespaces work in TS |
@MartinMuzatko |
What problem does this feature solve?
While we can access the returned type information of Vue native apis (i.e. data, computed, props, methods), the return type of asyncData function is totally lost from "this" object.
I'm not sure if it's even possible to combine these type information without changes on Vue core types, but I believe it is 'must-have' goal for us to provide safe, correct, efficient type definitions for users.
I've already spent some hours to solve this problem yet I haven't seen a daylight. Hope I can rely on your help.
The text was updated successfully, but these errors were encountered: