Improve Code Samples in Typescript Documentation

[rowild]

In this part of the documentation: https://github.com/vuejs/vuejs.org/blob/master/src/v2/guide/typescript.md

it is totally unclear for a newcomer in what kind of file the code has to go. Setting up a new project with vue-cli choosing "with Typescript" and then adding the given code from the docu to a script tag (even with "type='ts'") makes Vetur complain with

Types can only be used in s .ts file. (Vetur 8010)

It would be great if the docu could present a working example here. Would love to contribute, but am new to Typoscript.

[phanan]

Hey @rowild, thanks for letting us know. To elaborate on the issue, do you think the difficulty comes from you being new to TypeScript as well? The TypeScript guide is meant to help people get started with Vue in TS and assumes a certain TS level instead of being a beginner's guide to TS itself.

Full disclosure: I'm not a TS user.

[rowild]

@phanan Thank you for getting back to me!!

I am new to Typoscript, true. But the basic examples in the docu are, by themselves, not the problem. (I do have experience with types and OOP.) The problem is more were to place them. Does the code from the docu got into a .vue file's script-tag area? It doesn't seem so, since Vetur complains. Ok. So I put everything in a .ts file. But how is a .ts file implemented properly into a Vue project?

I guess it would be best to have a rebuild of the basic vue-cli setup as an example: What has to be done to rewrite the "About.vue" component with Typescript? And how is it then imported into App.vue? That would help me because currently I am simply stuck. (well... I study other articles and git repos... however, it is the Vue documentation, which is THE documentation in FOSS!)

[phanan]

Fair enough. Pinging TS people @octref @znck @ktsn for halp.

[octref]

Please open an issue with reproducible case at https://github.com/vuejs/vetur. As far as I can tell, this works perfectly fine for me:

With lang="ts"

[rowild]

Ah! Didn't think that this is a Vetur problem. Thank you for clarifying this, much appreciated! Closing this issue.

[rowild]

@octref @phanan Sorry, I have to re-open this issue. I uninstalled Vetur and tried to run this code:

<script type="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

// The @Component decorator indicates the class is a Vue component
@Component({
  // All coponent options are allowed here
  template: '<button @click="onClick">Click!</button>'
})

export default class About extends Vue {
  // Initial data can be declared as instance properties
  message = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

The compiler still complains about the :void return type as can be seen in the screenshots:

And I still have no clue how to really start a Typescript-based Vue project.

Also, what is created via vue-cli and proposed by the docu in terms of tsconfig.json differs immensely, and it seems that the docu is quite behind the contemporary standards.

I might very well be doing something wrong, but since this is only a try to copy code from the docu, this shouldn't happen.

I also see some imbalance in terms of what can be expected from a person, who tries to get into Vue & Typescript. E.g. at this point I very well know which IDE to use, nevertheless the docu recommends VScode. IMO no need for that. Instead, there should be complete examples of a starter project, which are not really given.

Is there any chance to improve that? Afteer all - as I already mentioned earlier - it is the Vue docu... not just any docu :-)

Thanks for your feedback and patience!

PS: Here is an issue in Vetur: https://github.com/vuejs/vetur/issues/1347

[rowild]

Sorry... reopening now

[ktsn]

It’s lang=“ts” but not type=“ts”. I’m not sure if we should include SFC guide in vuejs.org as it is vue-loader thing?

[rowild]

@ktsn Thank you for finding my typos! I could bite my a**, If I'd only reach it...

[ctt8520]

@phanan Thank you for getting back to me!!

I am new to Typoscript, true. But the basic examples in the docu are, by themselves, not the problem. (I do have experience with types and OOP.) The problem is more were to place them. Does the code from the docu got into a .vue file's script-tag area? It doesn't seem so, since Vetur complains. Ok. So I put everything in a .ts file. But how is a .ts file implemented properly into a Vue project?

I guess it would be best to have a rebuild of the basic vue-cli setup as an example: What has to be done to rewrite the "About.vue" component with Typescript? And how is it then imported into App.vue? That would help me because currently I am simply stuck. (well... I study other articles and git repos... however, it is the Vue documentation, which is THE documentation in FOSS!)

Hello, have you solved the problem again? I have the same problem

[ctt8520]