NO7 用ts限制define（Emits 或 Props）的参数类型，限制函数传参类型

• ts限制组件传参类型，默认是必须传值的，否则控制台会出现警告，引入组件的地方会出现红色提醒。如果不想必传在绑定参数的后面加？即可。
• ts传参支持多种类型校验，一个参数可以传字符串、数组、boolean等

父组件
<script setup lang="ts">
import TsExample from './components/ts-example.vue'
const onUpdate = (data: any) => {
  console.log(data)
}

// function test(params: (string | boolean)) {
//   console.log(typeof params, params)
// }
const test = (params: (string | boolean)) => {
  console.log(typeof params, params)
}
test('123')

</script>

<template>
  <TsExample :msg="123" :title="'hello'" @on-update="onUpdate" @on-delete="onUpdate"></TsExample>
</template>

子组件
<script setup lang="ts">
    import { ref } from 'vue'

    // defineProps<{msg: string}>()
    // defineProps<{msg?: any}>()
    // defineProps<{msg?: (string | number)}>()
    defineProps<{
        msg?: (string | number),
        title: string
    }>()
    
    // 定义默认值方式1
    // interface Props{
    //     msg2?: (string | number | boolean),
    //     title2?: string[]
    // }

    // withDefaults(defineProps<Props>(), {
    //     msg2: 'hello vite',
    //     title2: () => ['one','two']
    // })
    // 定义默认值方式2
    // withDefaults(defineProps<{
    //     msg2?: (string | number | boolean),
    //     title2?: string[]
    // }>(), {
    //     msg2: 'hello vite2',
    //     title2: () => ['one','two','three']
    // })
    
    const name = ref<string>('')

    /**@blur="handleBlur" */ 
    // const handleBlur = (e) => { 
    //     console.log(e.target.value)
    // }

    // const emit = defineEmits(['on-update'])
    // const handleBlur = (event: any) => {
    //     const {target} = event
    //     emit('on-update',{data: target.value})
    // }

    /** 使用ts */
    // const emit = defineEmits<{(event: 'on-update', data: string):void}>()
    const emit = defineEmits<{
        (event: 'on-update', data: string):void,
        (event: 'on-delete', id: string):void,
    }>()
    const handleBlur = (event: any) => {
        const {target} = event
        emit('on-update', target.value)
        emit('on-delete', target.value)
    }
</script>

<template>
  <h1>{{msg}} {{title}}</h1>

  <h1>{{name}}</h1>  
  <input type="text" v-model="name" @blur="handleBlur($event)">
</template>