Skip to content

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

@zhang-xinchao

Description

@zhang-xinchao

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions