Subscribe on changes!

types: Spread `props` causes typescript error

avatar
May 20th 2022

Link to minimal reproduction

https://www.typescriptlang.org/play?jsx=1#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5bwC+c6UBcA5AG4CuqNAsAFDtoDGANgIZRUFBli4xgROKgAeYVGIAqATzkAeBQD4AFDABccBQEp9dCMGTt2XIgGd4uABbAeyOAF4UGbHgKRiMLQR2OBC4MCowG30gtlC4uAAjAX0AZRgobABzYNDSdlJDSzZrLDs4AAUBVBJ3T0wcfEJ-QJyQ8IhI6Nb4gDo+x2dkHvbIgBpuuPQICFT0rO68tgKikrKuJxdanAB3OAGXLUKONhk5RRVUVQApFIANHoBRHlQQaphtVUrBGoQ+nvXBj0ACQjGzkAD0GkMQA

Steps to reproduce

import { defineComponent } from 'vue'

declare function expectType<T>(t: T): void

const Child = defineComponent({
    props: {
        bar: String
    }
})

const Parent = defineComponent({
    props: {
        ...Child.props,
        foo: String
    }
})

const child = new Child()

expectType<JSX.Element>(<Parent {...child.$props} />)

What is expected?

It shouldn't cause errors since the Parent should have the same props as child

What is actually happening?

Causing error because ReservedProps.ref and VNodeRef are not the same (the function has different arguments)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 21.68 GB / 63.94 GB
  Binaries:
    Node: 16.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.13 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.24.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.47)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: workspace:* => 3.2.34

Any additional comments?

No response