Skip to content

defineCustomElement props become readonly when component defines array emits #11353

@andylizi

Description

@andylizi

Vue version

3.4.31

Link to minimal reproduction

https://stackblitz.com/edit/vue-ce-type-repro?file=src%2Fmain.ts

Steps to reproduce

Using the reproduction link:

  1. Open the reproduction link and wait for npm install to finish.
  2. Run npx vue-tsc
  3. Observe type error.
  4. Comment out the defineEmits line in counter.ce.vue, run vue-tsc again.
  5. Observe that the type error disappears.

Manual setup:

const Comp1Vue = defineComponent({
  props: {
    a: Number,
  },
  emits: ['click'],
})
const Comp = defineCustomElement(Comp1Vue)

new Comp().a = 42   // property 'a' is read-only

What is expected?

No type error as props shouldn't be read-only.

What is actually happening?

src/main.ts:13:4 - error TS2540: Cannot assign to 'count' because it is a read-only property.

   el.count = 42;

This error only appears if defineEmits is present. It shows up in both vscode and vue-tsc.

System Info

No response

Any additional comments?

This is a variant of #7782, which was fixed by #7937 but only for object-style emit declarations. However, type-only emit declarations in SFCs are always compiled into arrays.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions