Vue: can't resolve object properties when using <script lang="ts">
We're telling some of our Vue SFCs to be TypeScript, but whilst we get nice completion and type safety on variables, ie:
// some component
methods: {
foo (bar: string) {
...
}
}
...we're getting issues with plain objects, in this case, a hash of validation rules:
// validation.ts
export default {
...
osVersioningFormat (rule, value, callback) { ... }
}
import validation from 'config/validation'
...
const validator = validation.osVersioningFormat
Check out the below:
If we don't use `lang="ts"` WebStorm finds the variable:
If we do use `lang="ts"` I can only presume (I don't know) that TypeScript is doing its job and thinks the imported `validations` module is an object.
Note that we have all path aliases declared in both `tsconfig.json` and webpack files.
Is there some way round this?
We can't seem to have both JS and TS functionality in the same file.
Please sign in to leave a comment.
Does resolving work if you use relative paths rather then absolute when importing `validation` module? Neither webpack aliases nor tsconfig.json path mappings are supported in .vue files with `lang="ts"` (see https://youtrack.jetbrains.com/issue/WEB-34105, https://youtrack.jetbrains.com/issue/WEB-29799)
Hi Elena,
Nope, no difference:
So VS Code can see the object:
Completion works fine for me using similar syntax:
can you share a sample project I can use to recreate the issue?
Thanks for testing!
So we just tested this on a new project, and it seems to work. We tried TypeScript classes with decorators, as you have, and Vue Object-based components. Both worked.
We can only conclude, as this project is about 2 years old now, that there must be some settings (webpack, typescript, etc) which is preventing this from working, and has probably been solved by newer setups.
Next step for us will probably be to create a new project from scratch, and migrate the old project to it. (This will hopefully solve some other issues we have been having).
Unless you have any other ideas?
No good ideas... Try invalidating caches (File | Invalidate caches, Invalidate and restart) - does the issue persist? If yes, try Ctrl+clicking on `validation` ( in `validation : validation`) - what definition are you taken to?
> try Ctrl+clicking on `validation`
Yes, this works for both setups. I'll try invalidate caches now. Good idea! (whether it works or not)
Alas! It did not work :(
No more ideas, sorry:(
I'll bookmark this and will update the post if the new setup works.
Computers. They do incredibly complicated things. It's not surprising things don't always work :P
(Thanks for your help as always!)
Dave Stewart - did you ever figure out what caused this?
I'm facing the same issue :/
Simple example :
@Dimitor115 what syntax do you use to define Vue components? please provide a full, self-containing code snippet
OK, that component was pretty big, I'm sending code snippet of another component with the same problem and of course the same syntax. As you can see, there is a problem with $store, prop roomId and computedProperty isRegistrationRequestProcessing. I'm using intliJ Ultimate 2019.3.2
Components created with
are not yet supported, please follow https://youtrack.jetbrains.com/issue/WEB-35714 and https://youtrack.jetbrains.com/issue/WEB-31721 for updates
Enabling the Typescript language service in Settings | Languages & Frameworks | TypeScript should help to get rid of some of the issues