Skip to content

Recommend return type annotation #1239

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

Merged
merged 2 commits into from
Oct 28, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/v2/guide/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,3 +139,39 @@ var vm = new Vue({
myOption: 'Hello'
})
```

## Annotating Return Types

Because of the circular nature of Vue's declaration files, TypeScript may have difficulties inferring the types of certain methods.
For this reason, you may need to annotate the return type on methods like `render` and those in `computed`.

```ts
import Vue, { VNode } from 'vue'

const Component = Vue.extend({
data() {
return {
msg: 'Hello'
}
},
methods: {
// need annotation due to `this` in return type
greet(): string {
return this.msg + ' world'
}
},
computed: {
// need annotation
greeting(): string {
return this.greet() + '!'
}
},
// `createElement` is inferred, but `render` needs return type

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the reason you're running into this is that it references greeting. You shouldn't need this if greeting is annotated.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tried it but sadly render still needs annotation. (as reported in vuejs/vue#6921).

I guess the reason is that compiler needs to check the call of createElement to get the return type, and check calling will cause check argument types. In this case, this.greeting causes cyclic error.

render(createElement): VNode {
return createElement('div', this.greeting)
}
})
```

If you find type inference or member completion isn't working, annotating certain methods may help address these problems.
Using the `--noImplicitAny` option will help find many of these unannotated methods.