v2.2.2 Unable to interpret locally defined interfaces in defineProps and v-bind

[ajaxtheriot]

Vue - Official extension or vue-tsc version

2.2.2

VSCode version

1.97.2

Vue version

3.5.13

TypeScript version

5.7.3

System Info

package.json dependencies

Steps to reproduce

v2.2.0 Does not have any of these issues. As soon as I updated to v.2.2.2, I started to get these errors. Even with the errors showing, the code builds with no errors and works as expected.

Setup

We need 2 components who both use local interfaces to define their props. Ex: const props = defineProps<IProps>();

One component is a extends the other with other properties.
Component A: interface IProps extends IExample {}
Component B: interface IProps extends IExample2, IExample {}

Below are the code snippets in question.

BaseModal.vue

<script setup lang="ts">
interface IProps extends IModal, ICoreElements {}

const props = withDefaults(defineProps<IProps>(), { 
  closeOnOverlayClick: 'yes', 
  modalPosition: 'center' 
});
</script>

PopupModal.vue

<script setup lang="ts">
interface IProps extends IPanel, IModal, ICoreElements {}

const props = withDefaults(defineProps<IProps>(), { 
  panelHeight: '100%', 
  panelWidth: '100%' 
});

const { panelCssClass, panelHeight, panelWidth, ...modalProps } = props;
</script>

<template>
  <BaseModal ref="modal" v-bind="modalProps">
    <BasePanel
      :css-class="panelCssClass"
      :height="panelHeight"
      :width="panelWidth"
    ></BasePanel>
  </BaseModal>
</template>

What is expected?

No errors or red squiggly lines.

What is actually happening?

Getting a couple of errors on PopupModal.vue

In the Script

Exported variable 'modal' has or is using name 'IProps' from external module "d:/Projects/vscode-vueextension-bug/src/components/core/BaseModal.vue" but cannot be named. ts-plugin(4023)

In the Template

Exported variable '__VLS_1' has or is using name 'IProps' from external module "d:/Projects/vscode-vueextension-bug/src/components/core/BaseModal.vue" but cannot be named. ts-plugin(4023)

Link to minimal reproduction

https://github.com/ajaxtheriot/vscode-vueextension-bug

Any additional comments?

There is a work around so I won't get these errors, the problem I have is the code is working as intended without the workarounds. The work around would be to have the BaseModal define directly to the two interfaces.

BaseModal.vue

<script setup lang="ts">
const props = withDefaults(defineProps<IModal & ICoreElements>(), { 
  closeOnOverlayClick: 'yes', 
  modalPosition: 'center' 
});
</script>

This code now works however if I want to make a component called SpecialPopupModal.vue that uses the PopupModal.vue, below becomes a problem:

SpecialPopupModal.vue

<script setup lang="ts">
interface IProps extends IPanel, IModal, ICoreElements {
  specialProperty: string;
}

const props = defineProps<IProps>();
const { specialProperty, ...popupProps } = props;
const popup = ref<InstanceType<typeof PopupModal> | null>(null);
</script>
<template>
  <PopupModal ref="popup" v-bind="popupProps">
  </PopupModal>
</template>

It seems using defineProps<IProps>() and not exporting IProps for others to use, even if their props are defined exactly the same, breaks the interpreter and makes it think there is an issue.

[KazariEX]

v2.2.2 only mapped the error back to the template, the error has always existed; This is how TS works. All you need to do is export all the interfaces used as props, or turn off the composite option in tsconfig.json to avoid the current repository being forcibly recognized as a public library.

In addition, the next version will disable the type inference for $el and $refs by default, which can also avoid some TS issues.

Also see #1232.