Minimal TypeScript support option added

[igogrek]

This PR adds TypeScript language option to webpack template.

This is basically the same idea as in: https://github.com/vuejs-templates/webpack/pull/781

The main difference is that I've tried to find minimal possible configuration and code changes. So in this case there's a metalsmith plugin that renames .js files from /src to .ts if typescript option is enabled. This way there's no need to maintain both .js and .ts sources. Checked with both TS enabled and disabled.

[nickmessing]

@Igogrek, I think we should wait for vuejs/vue#5887 before even considering adding typescript to webpack template, and even then I don't think this will be a valid option since we try to keep this template minimal and even vuex is not here.

[igogrek]

Well that's sad. While I certainly agree on keeping template as minimal as possible - TypeScript is one of the most needed (or at least most discussed) features missing on vue-cli (see https://github.com/vuejs/vue-cli/issues/263)

https://github.com/vuejs/vue/pull/5887 shouldn't break anything but I will double check

[nickmessing]

@Igogrek, I think with all of discussion around TypeScript we can make a dedicated typescript template, @posva, do you think that's a valid option after vuejs/vue#5887 gets merged?

P.S. I really think vuejs/vue#5887 will be a big change for typescript support since it will make it possible to not use vue-class-component. I'm waiting for it for a long time.

[LinusBorg]

@nickmessing makes sense to wait for #5887.

[yalishizhude]

Hey~you forget unit tests

[igogrek]

@yalishizhude Thanks. Will think how to do it best after https://github.com/vuejs/vue/pull/6391 is merged.

[igogrek]

Updated the fork and dependencies versions.

@yalishizhude I've added unit test TypeScript support. Note that it will need to be changed again as https://github.com/vuejs-templates/webpack/pull/824 likely will be merged soon.

Waiting for 2.5 for now, to be able to update TypeScript usages properly (definitions are merged already).

[solarhell]

@Igogrek Vue 2.5.0 already released 🍺

[igogrek]

@solarhell I've updated PR again to use Vue.extend() now.

Couldn't find any docs for the new intended TypeScript definition usage, but this approach seems best and autocompletion works great.

Tested different combinations with different ESLint settings and everything seem to work now.

[aesfer]

For anyone wanting to give this PR a try you can use:

vue init vuejs-templates/webpack#pull/797/head my-project

[skray]

@Igogrek did you have plans to convert the included unit test as well? I would find it strange to generate a TS project and to have some of the files still be Javascript.

I bring this up because if you do convert it over, at a minimum you'll need to include the @types/mocha and @types/chai dependencies, and add import {expect} from 'chai' to the Hello.spec.ts file.

[igogrek]

@skray Thanks. Totally forgot to add chai - fixed now.

[njleonzhang]

@Igogrek,

I get warnings, can you help?

can not find module '@/components/HelloWorld'

import HelloWorld from '@/components/HelloWorld'

can not find module '@/App'

import App from './App'

[igogrek]

@njleonzhang Just checked - seem to be fine for me. I assume you have a warning in IDE, not the project build?

[njleonzhang]

@Igogrek Yeah in vscode. But the build is OK.

[igogrek]

@njleonzhang You're right. Guess I'll need to put back vue-shims for better IDE support.

For now put vue-shims.d.ts in src folder with:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

And change imports to have a .vue extension:

import HelloWorld from '@/components/HelloWorld.vue'
...
import App from './App.vue'

Since I don't really like leaving this extensions only for TypeScript - I'll try to find other solution which works both for CLI build and IDE too.

[njleonzhang]

@Igogrek Tnx, I also found this solution. As you mentioned. It's not good enough. Hope you can find perfect one. BTW, I have a question on typescript and mixin. would you please help to check? https://forum.vuejs.org/t/typescript-to-restrict-vue-component-instance-must-have-special-properties-or-methods/21709

[igogrek]

@njleonzhang No, sorry can't help with Mixin.

For the IDE support - https://github.com/vuejs/vetur/issues/213 indicates that .vue extension is the only solution for now. Reverted shims back.

[ghost]

So, when the merge?

[Parasrah]

I know I tried getting this to work with Jest earlier in the month and failed, due to the limited support offered by Vue and Jest for Typescript. Something such as jestpack may offer a solution to this, although I'm not sure if this is as reliable as ts-jest, and definitely less reliable than jest itself. I could see this being a major hurdle in integrating this with #824

[igogrek]

@Right2Drive Thanks for the info. jestpack looks quite complex to setup and very outdated. ts-jest turned out to be just the right tool. I've added basic Jest support for now, coverage should be tweaked though (will do later).

Overall this PR is getting harder and harder for me alone to maintain.

@LinusBorg is there any chance this getting merged?

[lsim]

Not sure if this sort of thing is appropriate here, but I have spent a couple of days converting an angular2 project into vue+ts using this template and it's been a very good experience. This a seriously powerful stack - and simple enough in terms of configuration that you can adapt it to your needs - I like the balance it strikes.

Just wanted to say thanks for the hard work - I hope you get it merged soon!

[sthomp]

Have you considered adding tslint to the template?

[igogrek]

@sthomp I did, but at the time of me checking it TSLint had some issues with .vue files. And it seems that issue is still open https://github.com/palantir/tslint/issues/2099

ESLint worked ok for me, additionally TS plugin could be installed. But ideally for TypeScript - TSLint should be used. I will check again soon.

[igogrek]

I've updated the fork again. Had some more issues with Jest+TypeScript but resolved them now. I've also fixed unit tests so it builds successfully now.

@LinusBorg since there are unit tests now, can this be merged or not?

[ghost]

It is the magic PR, maintainer (@LinusBorg ) don`t see that.

[LinusBorg]

Hey everyone.

We appreciate the hard work that was put into this - and I will consider a merge, just have to take it for a spin myself before to get a feel how much complexity it adds.

We originally planned a separate template, but that won't happen anymore before we do vue-cli 3.0 - which itself is still in the concept phase.

So I understand that an official integration would be welcome by many people, and I don't want to let this work go to waste.

The only thing that's might end up in a "no" vote would be if this makes the maintenance too complicated - I'll see about that.

Unfortunately I I'll be travelling this weekend to won't have a chance to check this out with the dilligence that's reuqired.

[ThePlastic]

@Igogrek take into consideration the idea of adding support to sass and scss, in my case it was enough to add these 2 lines to package.json's dev dependencies: "sass-loader": "^ 6.0.6" "node-sass": "^ 4.7.2"

and the I can simply use: <style lang="scss"> and it compiles without any problem.

[LinusBorg]

@ThePlastic then to be "fair", packages for all supported preprocessors (sass/scss, less, stylus) should be added - which imho bloats dependencies unnecessarily, but that'S debatable.

[ThePlastic]

@LinusBorg i can see your point