Vue3+Ts Props类型自定义

当Vue3使用强类型的TypeScript后，props的定义可以有更多姿势。下面就列举一些要点和简单用例。

• 要点

  • 像Vue2一样的那些定义自然还是OK的，比如Number、String等等
  • 因为有Ts在，Vue3可以有更方便、快捷的复杂类型定义

• 简单用例
  比如说现在需要定义一个string[]的prop，那么就像下面这样写

  defineProps({
    acb: Array as () => string[]
  })
  

  同样地，如果想定义一个类似{name: string, age: number}这样的，可以如下这样写

  defineProps({
    abc: Object as () => ({name: string, age: number})
  })
  

  当然，你也可以把类型分离出去，像这样

  type TAbc = {
    name: string
    age: number
  }
  
  defineProps({
      abc: Object as () => TAbc
  })
  

  函数自然也是可以的，可以像这样

  import {PropType} from "vue";
  
  type TFunction = (args?: string[]) => string
  
  defineProps({
      abc: Function as PropType<TFunction>
  })
  

  这里使用了vue提供的PropType，前面提到的那几个定义使用PropType来实现当然也是可以的