I'm struggling with this issue:
Argument of type 'HelloWorldProps' is not assignable to parameter of type 'InferDefaults<LooseRequired<HelloWorldProps>>'.
Types of property 'complexProp' are incompatible.ts(2345)
Here's the code snippet:
<script lang="ts">
export type ComplextPropType = boolean | string | any[] | null;
export interface HelloWorldProps {
simpleProp?: boolean;
complexProp: ComplextPropType;
labels?: string[] // Vue docs example
}
export const HelloWorldPropsDefaults: HelloWorldProps = {
simpleProp: false,
complexProp: ((): ComplextPropType => null)(),
//complexProp: ((): ComplextPropType => null),
//complexProp: null,
//labels: ()=> ['a', 'b'] // Vue docs mention something like this
};
</script>
<script setup lang="ts">
const props = withDefaults(
defineProps<HelloWorldProps>(),
HelloWorldPropsDefaults, // <-- Error reported here
);
</script>
<template>
<h1>{{ props.complexProp }}</h1>
</template>
Any suggestions on how I can set a default value for complexProp?