Added support for TypeScript (as an option)

[bmass02]

I've added TypeScript to prompt.

I used a combination of ts-loader, vue-class-components, and a Vue shim for single file "*.vue" components.

Instead of implementing a way of modifying the file extensions (i.e. js -> ts), I just added a filter rule to remove whichever isn't used. (This can probably be improved.)

Hopefully this will help others who are trying to use Vue with TypeScript.

Testing

I haven't tested all combinations of the options in the prompt. However, I did test with all the options selected, all the options not selected (except TS), and with the options vue-router and TS.

[lbssousa]

Good! But what about basing it in vue-property-decorator rather than vue-class-component? The first one provides more (TS-only) decorators than the last.

[bmass02]

@lbssousa I chose vue-class-component because it seemed to be a safer option (officially supported and more popular).

[Toilal]

vue-property-decorator adds more decorators to vue-class-component. In fact, it depends on it.

[bmass02]

@Toilal I guess I didn't explain my choice of only vue-class-component well.

For an official template/option, I think that vue-class-component should be added as a convention for TS support where vue-property-decorator should be left as a configuration.

The reasons are that it keeps the template lean (one less dependency to worry about) and that extra dependency (vue-property-decorator) isn't officially supported. I also don't think that everyone will necessarily want vue-property-decorators. Maybe if it becomes a more standard way of setting up Vue with TS then it should be added, but as of now it just doesn't seem to be part of the standard.

Again, maybe I'm wrong about what the standard is for Vue with TS. But to sum up my reasons, I want to keep the template as simple as possible while also providing the standard way of setting up Vue with TS.

[Toilal]

I understand, in this case it make sense to keep vue-property-decorator out of an official typescript template.

I maintain a fork of this template, Toilal/vue-webpack-template, that supports TypeScript as an option and also supports components writen with 3 distinct files (HTML, CSS, TS). I've included vue-property-decorator in the TypeScript template, it feels to me that something is missing when this dependency is not added. But it's mainly a matter of opinion :). (FYI Library support is coming soon in this template too).

[lbssousa]

Maybe you could start with a more basic template, without using classes and inheritance, but still with TS type inferences, as proposed in https://github.com/Microsoft/TypeScript-Vue-Starter. It could be more interesting after vuejs/vue#5887 is merged (related issue: vuejs/vue#478).

[bmass02]

@lbssousa I think that would be great! I'll try to keep track of what is going on with that PR, but anyone is welcome to add to this PR.

[bmass02]

I'm going to close this in favor of #797