vue3的defineProps接收型別註解

 //這是沒有用ts語法接收的props引數
defineProps({
     color: String,
     size: {
         type: String,
        required: false,
         default: 'middle'
     },
 })


//TS語法
//格式：withDefaults(defineProps<型別>(), { 預設值名：預設值})
第一種寫法：
withDefaults(defineProps<{ color: string, size?: string }>(),{

     size: 'middle'

})

第二種寫法：透過解構設定預設值 
const { color, size = 'middle' } = defineProps<{ color: string, size?: string }>()
//但這樣會丟失資料 的響應式
// 解決辦法: 下載 npm i -D @vue-macros/reactivity-transform
// 在vite.config.js裡配置
// import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

// export default defineConfig({
//   plugins: [ReactivityTransform()],
// })

第三種無預設值寫法：這種是沒有預設值不需要下載，不會丟失響應式
 const props = defineProps<{ color: string, size?: string }>()
 const { color, size = 'middle' } = props
 console.log(color, size);