remove emitDecoratorMetadata from tsconfig.json

[doppelreim]

Version

3.0.0-rc.3

Reproduction link

kaorun343/vue-property-decorator#107

Steps to reproduce

This is the initial bug-report: #1498

There was nothing that could be done in vue-cli to fix it, but I was redirected to vue-property-decorator.

I opened kaorun343/vue-property-decorator#107 and a new version was released.

The new version does not use reflect-metadata anymore. That means, it does not rely on emitDecoratorMetadata any more.
In fact, when emitDecoratorMetadata is enabled, warnings are thrown.

vue-cli enables emitDecoratorMetadata here:

vue-cli/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json

Line 9 in 05391b6

<%_ if (options.classComponent) { _%>

Could that be removed?

What is expected?

There should be no warnings.

What is actually happening?

There are warnings.

[silkentrance]

@doppelreim vue-router does not have an export called Route, there is just the default export which is VueRouter.

"export 'Route' was not found in 'vue-router'

[silkentrance]

@Akryum and please do not remove the default emitDecoratorMetadata=true as it is required by other packages.

[silkentrance]

@doppelreim

from your augmented components/HelloWorld.vue:

import { Route } from 'vue-router';

@kaorun343 😀

[doppelreim]

I'm confused...

What I want to have is a watcher on $route with typed arguments.
Something like this:

@Watch('$route')
private async onParamChanged(newRoute: Route, oldRoute: Route) {
  ...
}

I think, that is a reasonable thing to want?

vue-router does export a named thing called Route. But you are right, it is an interface.
I do not understand why it being an interface means that I can not import it. The typescript compiler does not seem to care, as long as I do not use Route as the type for the function-arguments.
I can use it just fine inside of the function-body (as a type).

---

Apart from that:
Who else requires emitDecoratorMetadata? It is not a default for vue-cli to include it.
It is only included if options.classComponent is set (see linked code in the opening post).
I assume that flag gets set, when the user answers this question from the wizard Use class-style component syntax? (Y/n) Y.

[doppelreim]

Is there anything I can do to get this issue resolved (in whatever form)?
Some info I could provide?
@silkentrance Could you comment on my questions/confusion?

[yyx990803]

The flag defaults to true because it was required by vue-property-decorator 6.x.

[silkentrance]

@doppelreim have you tried with the latest rc7? I have just set up a new project using that, added @vue/typescript plugin and then imported { Route } from vue-router. I then copied your function skeleton but without the decorator.

It compiles just fine, without tsc complaining about anything.

And overcome this obsession with the decorator metadata, this has nothing to with it.

[silkentrance]

@doppelreim I then added the above method incl. the watch decorator to the HelloWorld component, ran npm run build and npm run serve without any problems.

[doppelreim]

I updated vue-cli to rc10.
It adds a dependency on vue-property-decorator v7. Before, that was v6.
v6 depends on the flag emitDecoratorMetadata to be set, v7 does not.
The flag was removed from tsconfig.

The issue is solved for me :)