Subscribe on changes!

defineProps<PropsType> generates wrong code in typescript when PropsType is exported

avatar
Feb 26th 2023

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNpdT0luwzAM/AqhUwIk8t11DLToA/oAXVSHdhTEFCHSTQpDf6/k9tJcCC4zw5nVvDLbrwVNazoZUmAFQV0Ybp6mkzMqzvSOAimm0Q8IHymyvHlBWEG/GVsQTYEmyI7wwTEpPIEBH4p0ln/UDOBoiCQKvIFOcA96ecfRLzeV3RnHQLgxuq32u/0B1rx/cdQ1v057czBhri+Ps2d7lUglxuqoaP8divsWtk3dlZx1duaiytI2jYxDDX8VG9PUlM6mhTTMaFHm42eKd8FUhJ2pEiVhNvkHD3Rsog==

Steps to reproduce

If defineProps is supplied with a typescript interface that is exported, the compiler seems to be unable to traverse the type heirachy (extends) and hence generate incorrectly typed props.

  • If the interface itself is empty (e.g. all the fields are inherited from the base interface), it yields ts code that does not compile.
  • If the interface is non-empty, the props is only typed to the interface itself, and all the fields from base interface are ignored.

For example, this will yield typescript with syntax error:

<script setup lang="ts">
  interface PropsBase { type: string }
  export interface Props extends PropsBase { }  
  const props = withDefaults(defineProps<Props>(), {});
</script>

What is expected?

SFC compiler should be able to generate typescript code with props typed correctly regardless of whether the interface is exported or not.

What is actually happening?

Once the Type in defineProps<Type> is exported, SFC compiler is no longer able to follow the extends and hence produce incorrect type literal for props.

System Info

No response

Any additional comments?

No response

avatar
Jul 21st 2023

It's been fixed since v3.3