adapt index.d.ts for end users

[HerringtonDarkholme]

Related to #3509

TS declaration files need much hacks, as comments point out.
import Vue = require("vue") is the recommended way to import vue because it does not confuse TS/JS users whether to import default or import * as Vue and it does remind user the difference of commonjs module and es module.

[yyx990803]

Would appreciate review from @ktsn @kaorun343

[ktsn]

LGTM 👍

[isotes]

I was just trying out the new type definitions and had problems with importing them. I used the following alternative index.d.ts that worked for me in a Browserify environment before stumbling on this thread.:

export * from "./vue.d";
export * from "./options.d";
export * from "./plugin.d";
export * from "./vnode.d";
import {Vue} from "./vue.d";
export default Vue;

This supports several import styles and provides easy access to the other definitions besides Vue:

// just import Vue
import Vue from 'vue'
new Vue(...)

// import multiple definitions
import {Vue, ComponentOptions} from 'vue'

// import 'namespace style'
import * as Vuejs from 'vue'
new Vuejs.Vue(...)

What do you think?

[DanielRosenwasser]

Why is this an import to ./vue.d? It should probably just be ./vue

[HerringtonDarkholme]

Yes, it should.

@kaorun343 would you please have a look on this? I don't want to solve two different issues in one pull request.

[kaorun343]

I see, I will fix this later.

[DanielRosenwasser]

@isotes The problem you're going to run into is that everyone represented CommonJS exports incorrectly, and so it's not clear what the "right" import style is going to be when the interop story is decided on. Right now, you can enable the default export behavior if you use the --allowSyntheticDefaultImports flag.

[isotes]

@DanielRosenwasser Thanks for the clarification!