Is nesting interfaces allowed for withDefaults using the composition API?

[DanielTate]

I have this question on stackoverflow
https://stackoverflow.com/questions/76650304/using-vue3-composition-api-with-script-setup-and-typescript-is-there-a-way-to

I am using Vue3 Composition API with script setup and typescript for my project. In the docs we are provided this example:

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

Is there a way to use an interface as a property in the defaults?

I'm very new to typescript so I'm not sure I'm asking the right question. I want to do something like this:

<script setup lang="ts">

export interface WindowConfig {
    showTitlebar: boolean
}

export interface WindowType {
    title: string,
    config?: WindowConfig 
}

const DEFAULTS = {
    title: 'Default title',
    config: { showTitlebar: true } as WindowConfig
} as WindowType

const props = withDefaults(defineProps<WindowType>(), DEFAULTS)

</script>

However I am met with an error saying that DEFAULTS doesn't match the requirements for withDefaults.

Argument of type 'WindowType' is not assignable to parameter of type 'InferDefaults<WindowType>'.
  Types of property 'config' are incompatible.ts(2345)

Why is this happening and is there any documentation that can lead me in the right direction to fix it?

Here is an interactive example. In this example you can see I have made a function that requires the type WindowConfig This tells me the issue lies with Vue not Typescript.

[Shyam-Chen]

#8522