Vue props의 default값 설정하기(with TypeScript, Composition API)

일반적인 props 선언

const props = defineProps<{
  msg: string, 
  labels: Array<string>
}>();

defaults값 주기

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

withDefaults를 이용해주면 prop값 없이 component 이용시 default값으로 대체된다.

withDefaults 관련 lint 오류가 날 경우, eslintconfig에 아래 내용 추가

"globals": {
  "withDefaults": "readonly"
}

ref : https://vuejs.org/api/sfc-script-setup.html#default-props-values-when-using-type-declaration