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.

15 comments
Comment actions Permalink

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)

0
Comment actions Permalink

Hi Elena,

Nope, no difference:

0
Comment actions Permalink

So VS Code can see the object:




0
Comment actions Permalink

Completion works fine for me using similar syntax:

 

 

can you share a sample project I can use to recreate the issue?

0
Comment actions Permalink

 

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?

0
Comment actions Permalink

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?

0
Comment actions Permalink

> try Ctrl+clicking on `validation`

Yes, this works for both setups. I'll try invalidate caches now. Good idea! (whether it works or not)

0
Comment actions Permalink

Alas! It did not work :(

0
Comment actions Permalink

No more ideas, sorry:(

0
Comment actions Permalink

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!)

1
Comment actions Permalink

Dave Stewart - did you ever figure out what caused this?

0
Comment actions Permalink

I'm facing the same issue :/

Simple example :

0
Comment actions Permalink

@Dimitor115  what syntax do you use to define Vue components? please provide a full, self-containing code snippet

0
Comment actions Permalink

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

0
Comment actions Permalink

Components created with

Vue.extend({})

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

0

Please sign in to leave a comment.