RFC: TypeScript plugin

[yyx990803]

The TypeScript plugin now has a preliminary implementation here with:

• ts-loader
• fork-ts-checker-webpack-plugin
• tslint

TODOs

• Make the npm run lint script work with *.vue files
• Ensure compatibility with other plugins (PWA and test plugins)
• Offer options to use TS alongside Babel

Trying it Out

npm install -g @vue/cli
vue create ts-project
# select manual mode, pick TypeScript

For background on how plugins work in the new vue-cli, see here

Feedback welcome!

/cc @DanielRosenwasser @ktsn @HerringtonDarkholme @octref @kaorun343 @igogrek @prograhammer @Toilal

[igogrek]

Looks great, but wasn't able to run due to the same problem as in this thread #717.
Had to use node ..\@vue\cli\bin\vue create test-app, but yarn serve still gives me:
'vue-cli-service' is not recognized as an internal or external command

Minor note for the code:
App.vue has import like this import HelloWorld from './components/HelloWorld.vue';
But Home.vue has import HelloWorld from '@/components/HelloWorld.vue';
Which is inconsistent.
Also note that I couldn't tweak any of my IDE (WebStorm/VSCode) to properly understand @ alias.
There are some ways to ignore this as error, but it doesn't seem to work with refactorings (which is why I don't personally use it at all and still prefer longer ../../paths even for large projects).

[zeratulmdq]

Awesome work, I'll take a look tomorrow. Been waiting for this!

[zeratulmdq]

I gotta say this is the first time I use Vue with TS (been using TS with Angular for a while). I read this guide and the official TS guide so most of what I'm about to say might be just my lack of experience.

I set up the project and everything is working. I still need to fully understand the way this plugin system is gonna work. It wasn't complicated to set up everything but I would have expected a tslint/tsconfig file out of the box and the addition of "@vue/cli-plugin-typescript": "3.0.0-alpha.1", to package.json. I guess I must be missing something (some command maybe to tell the project I wanna use TS).

Regarding TS itself, I understand Vue converts properties inside the data object into getters/setters so this might be kind of complicated to acomplish without modifying internal things but I would expect something like this to throw:

import {Person} from '../models/person';

interface Data {
  msg: string;
  people: Person[];
}

export default {
  name: 'HelloWorld',
  data(): Data {
    return {
      msg: 'Welcome!',
      people: []
    }
  },
  created() {
    this.people = someService.randomNumber();
  }
}
</script>

I mean, I'm typing data() but that's just for the initial rendering. Inside the created hook I'm assigning a number to a previously typed data property and it will work. Is there a workaround for that?

BTW, as I always say, awesome work.

[igogrek]

@zeratulmdq
Good point, but until typings are improved for such cases the only good way to proceed is to use vue-class-component (there's an option already).
This way you can declare msg and people as class properties and error will be thrown.

[Toilal]

Use export default Vue.extend({}) for better TypeScript integration into Vanilla API (without vue-class-component). (Since Vue 2.5)

[Toilal]

I just tested generating a TypeScript project and a default project.

This is a really good base and seems really simpler to bring a custom feature into vue-cli.

Main difference from stable version is that no webpack configuration file is generated. I see two drawbacks for this choice :

• It may break some editors features.

For example, IntellijIDEA can parse webpack configuration like webpack aliases. So in IntelliJ IDEA with default template (no typescript), when I write import HelloWorld from '@/components/HelloWorld.vue', it shows a warning and the module is not resolved in the editor (=> no completion, no navigation, etc ...). With TypeScript option, it works because it relies on tsconfig.json compilerOptions.paths.

• It may be hard for a end-user that is not involved in vue-cli project to add an additional webpack plugin/loader.

[zeratulmdq]

Thanks @Toilal @igogrek I'll take a look

[yyx990803]

@Toilal you can access the webpack config as a file via node_modules/vue-cli-service/webpack.config.js

We will have a a ton of examples and recipes teaching users how to tweak the webpack config for common use cases.

[octref]

@yyx990803 Will writing plugins that use webpack-chain the main way to tweak webpack config?
Since changes made to node_modules/vue-cli-service/webpack.config.js will be lost after reinstall deps...right?

Other than that, PWA + TS seems a pretty solid setup for me. Will use it for a toy project to see how it goes and give more feedback.

[yyx990803]

Update: we have started making alpha releases! You can now directly test the new CLI by following the guide in README.

[veber-alex]

Can you add tslint-config-standard as an option when enabling TSLint?