without TS strict mode, props are not present on component internal interface

[danielroe]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

n/a

Vue version

3.5.3

TypeScript version

5.5.4

System Info

No response

package.json dependencies

{
  "dependencies": {
    "nuxt": "^3.13.0",
    "typescript": "^5.5.4",
    "vue": "latest",
    "vue-router": "latest",
    "vue-tsc": "^2.1.6"
  }
}

Steps to reproduce

Set strict: false in typescript compiler options, and use a component like this:

<script setup lang="ts">
defineProps<{
  links?: string[];
}>();
</script>

<template>
  <div :data-test="!!links" />
</template>

What is expected?

When setting strict: false in tsConfig, and using defineProps with an optional property, there are type-checking errors when the prop is used in the template.

What is actually happening?

The following type error is generated:

app.vue:10:22 - error TS2339: Property 'links' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps<{}, {}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...> & Readonly<...>, ... 16 more ..., {}>'.

10   <div :data-test="!!links" />
                        ~~~~~

Link to minimal reproduction

https://stackblitz.com/edit/github-m6twm5?file=app.vue,nuxt.config.ts,package.json

Any additional comments?

Update this seems to be stemming from an update in Vue v3.5 rather than the Volar v2.1 release.

[KazariEX]

It will be fixed by vuejs/core#11644

[danielroe]

thank you ❤️

closing as duplicate of #4704