Vue + TypeScript override `export default Vue`

Question

I am trying to use Vue and TypeScript. I am trying to compile to AMD in my tsconfig.

The type definition that comes with Vue.js states in vue/types/index.d.ts

export default Vue;

However, that causes typescript to compile this:

import Vue as "vue";
export default Vue.extend({ ... });

essentially, into this:

define(["vue"], function(vue) {
  exports.default = vue.default.extend({  ... })
});

Notice, that it believes vue should have a property .default, which it does not. Is there anyway to write a type definition that overrides the default vue type definition that states something like:

export = Vue;

or some flag in tsconfig that tells typescript not to add that .default property to the compiled AMD module?

Matt McCutchen · Accepted Answer · 2018-10-29 23:38:17Z

3

Enabling the esModuleInterop compiler option will make TypeScript generate code to check for both vue and vue.default at runtime.

As you note, the Vue type declaration is inaccurate, but based on this previous issue, I don't know if a new issue about it will be well received.

answered Oct 29, 2018 at 23:38

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Wilson Over a year ago

I see, the esModuleInterop adds an added helper function in the compiled file. __importDefault = function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; This then turns the Vue import into { "default" : Vue }. Thanks Matt.

Collectives™ on Stack Overflow

Vue + TypeScript override `export default Vue`

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related