In vue3 setup , how to both use defineProps with ts and value default？（Typescript）

Question

I want to use ts types and value default in "defineProps", but it don't work. How can I solve it?

code below

const props = defineProps<{
  type?: string
  color?: 'color-primary' | 'color-danger' | 'color-plain' | undefined
}>({
  type: {
    default: 'plain',
  },
  color: {
    default: 'color-plain',
  },
})

But it will raise error in ts.

Answer 1

You need to use withDeaults

type Props = {
  type?: string
  color?: 'color-primary' | 'color-danger' | 'color-plain' | undefined
}
const props = withDefaults(defineProps<Props>(), {
  type: 'plain',
  color: 'color-plain',
})