TypeScript global declarations handled inconsistently with actual build

[corsen2000]

I am using Vetur with a Nuxt.js Vue project that is using TypeScript. The project uses Webpack and ts-loader.

One of my .vue files is making reference to this.$router. Vetur is showing an error on that line that reads Property $router does not exist on the type default. When I run the build there is no error. So there is a difference in what I am seeing in the editor vs. the errors my build shows.

I would not expect this to be an error because in my .tsconfig.json I list vue-router explicitly in types. If I remove vue-router from types, I get this exact error. So Vetur seems to not be making use of types when generating its code sense.

Although vue-router is the most significant example I have noticed this issue for all global declarations that I've tested. Just for a test, I tried a similar thing with Jasmine globals and found similar issues.

Based on other observations and searching this projects source code, I can see that this extension is attempting to make use of my tsconfig. I can't figure out why there would be a problem with this specific setting though.

I can work around it with:

// eslint-disable-next-line no-unused-vars
import Router from 'vue-router';

This has no affect on the output of the project, but I am making a code change because my editor is inconsistent with my build, which is not ideal.

[octref]

Can you provide:

• Screenshot
• vetur version
• vue-router and vue versions
• your tsconfig

With the correct setup you should even have full IntelliSense for this.$router and this.$store (for vuex)

[octref]

And just for record, we are not using much options from users's tsconfig.json yet. There is no established practice of using tsconfig.json or jsconfig.json to specify how the js/ts in Vue SFC should behave, yet. And if vetur were to do so, I'll try to ask for some Vue members' opinions first before encouraging such a practice.

[corsen2000]

@octref thanks for taking a look at this issue. If you would like, I can provide exactly what you requested, but I think I have something better to help.

This issue can easily be reproduced by using this Vue CLI Package, which is a newly created Nuxt/TypeScript starter project.

If you setup a new project using that you can follow these steps to reproduce.

1. In index.vue
2. Add a mounted hook where this.$router is referenced console.log(this.$router);
3. Observe that Vetur reports an error. This is great because there is an error in the actual build, which you can see by running yarn dev.
4. In tsconfig.json
5. Add "types": ["vue-router"]
6. Observe that Vetur still reports an error in VSCode, but this is now inconsistent with the actual build. yarn dev will not report an error and the application works fine.

---

we are not using much options from users's tsconfig.json yet. There is no established practice of using tsconfig.json or jsconfig.json to specify how the js/ts in Vue SFC should behave, yet

I think I understand what you are saying, but I think I have different expectations. The system that I have setup is using this technique to process TypeScript written in a Vue SFC. Essentially the TypeScript in the Vue SFC is being treated identically to any other .ts file in the project. It is being processed with the exact same options from tsconfig.json.

If I wanted I could move the TypeScript from the SFC into a regular .ts file and the processing on it would be the same. It makes sense to me that the processing of .ts files and the TypeScript within a .vue file would be identical for a given project.

My understanding of your comments is that my expectation may not match yours in this case. I believe, that you are suggesting differently handling for TypeScript in .vue files than what a project may be using for regular .ts files. I can imagine some benefits may exists with that approach, but I only see negatives for myself at this time.

---

Would it be possible / desired to allow Vetur users the option to specify additional TypeScript configuration that would typically come from .tsconfig?

---

My end goal is that VSCode provide good TypeScript code sense and have any errors reported in the editor match actual errors that I would encounter when running the build. This would be a great productivity boost for my team.

Thanks again for looking into this issue and please let me know how I can further help.

[octref]

Let me look into that. Meanwhile, adding import Router from 'vue-router' seems to work, but that's less than ideal...

[octref]

Umm, ok. So you are using vue-class-component and ts. I'm afraid we don't have much support for it yet.

There is a lot of upcoming changes to Vue + TS like this one: vuejs/vue#5887
So I wouldn't want to build specific support for it until the dust settles down a bit.

Meanwhile in Vetur today, installing vue-router as a dependency (its module contains type definition) and importing it works fine.