'Cannot find name' when using js

[notiv-nt]

VSCode gives me an error when i'm using vue3 + js + props[ + setup]

Cannot find name '%name%'.

Image

But the funny thing:

props + data + setup — ok

props + data — ok

setup only — ok

setup + props — doesn't work at all

props — :(

Repo

[Shinigami92]

Pls try

export default {
  props: { propName: String },
  // data: () => ({ dataName: 'hello' }),
  setup() { return { setupName: 'here' } },
};

or

export default {
  props: { propName: String },
  // data: () => ({ dataName: 'hello' }),
  setup: () => ({ setupName: ref('here') }),
};

[notiv-nt]

@Shinigami92 no, doesn't work either

[johnsoncodehk]

Please check your extension version, after 0.26.6 template don't type-check with <script lang="js">.

See johnsoncodehk/vue-tsc#46.

[notiv-nt]

@johnsoncodehk
Volar v0.26.3

File:

<template>
  <div>{{ propName }}</div>
  <div>{{ setupName }}</div>
</template>

<script>
export default {
  props: {
    propName: String,
  },

  setup() {
    return {
      setupName: 'here',
    };
  },
};
</script>

[johnsoncodehk]

@notiv-nt please update your extension version to latest 0.26.9.

[notiv-nt]

@johnsoncodehk ok, need to update vscode too
Now, there is no error, but variables are type any

[johnsoncodehk]

This is expected, if you want type-check in template please use lang="ts".

[notiv-nt]

Yes, i know, but is it possible to treat <script> with javascript as typescript? Even without lang="ts"?

[johnsoncodehk]

This is the behavior of the old version, but we found that the jsdoc type definition will be broken.

If you remove props option only keep setup(), you can still have some type-checking in template, because js limited depth of type-checking.

I think you're searching for this.

<script lang="ts">
// @ts-nocheck
...
</script>