Vue3解决definedProps无法引入外部Typescript类型定义

背景

公司准备二次封装组件库，作为Upgrader，发现在升级过程中，导入三方组件库的类型，作为defineProps<OtherType>会报错，对于为什么会报错的，就自己去看看啦。网上找了大量文章，emmmmm,最后自己记录一下。（PS：还是希望官方早些支持这个特性）

前提了解

首先目前vue3还不支持defineProps导入外部类型，特别是在setup语法糖中，先来看看官方issue。尤大说的，未来会逐步支持

话不多说，直接上代码

我这个是 ant desgin vue4 + vue3.2.xx + vite4 + tsx语法

这里就用及联选择器作为案例。

<template>
     <xxx-cascader
      v-model="selectedValue"
      :args="{
        options: options,
        defaultValue: defaultSelectedValue,
        loadData: loadData,
      }"
    ></xxx-cascader>
</template>

<script setup lang="ts">
  
  // 手敲的，就不写类型了，看看就行
  const options = ref([
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake'
            }
          ]
        }
      ]
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      isLeaf: false
    }
  ])

  const selectedValue = ref([])
  const defaultSelectedValue = ref(['zhejiang', 'hangzhou'])
</script>

xxx-cascader

<template>
  <XXXCascader />
  <div></div>
</template>

<script lang="tsx" setup>
import type { CascaderProps } from 'ant-design-vue'
import { ref } from 'vue'

export interface XXXCascaderProps {
  args: CascaderProps
  modelValue: string[]
}

/**
 * 参数传递的prop
 */
const paramProps = defineProps<XXXCascaderProps>()

/**
 * 默认配置
 */
const defaultConfig = {
  /**
   *  输入框占位文本
   */
  placeholder: '请选择',

  /**
   * 禁用
   */
  disabled: false,

  /**
   * 在选择框中显示搜索框
   */
  showSearch: true,

  /**
   * 在选择框中显示搜索框
   */
  allowClear: false,

  /**
   * 当此项为 true 时，点选每级菜单选项值都会发生变化
   */
  changeOnSelect: true,

  /**
   * 自定义 options 中 label name children 的字段
   * 默认 { label: 'label', value: 'value', children: 'children' }
   */
  fieldNames: { label: 'label', value: 'value', children: 'children' },

  /**
   * 浮层预设位置
   */
  placement: 'bottomLeft',

  /**
   * 自定义浮层样式
   */
  dropdownStyle: {},

  /**
   * 输入框大小
   */
  size: 'middle'
} as Partial<CascaderProps>

// 合并参数
const props = Object.assign({}, defaultConfig, paramProps.args)

// 定义事件
const emits = defineEmits(['update:modelValue'])

// 默认选择项
const defaultValue = paramProps.args.defaultValue as string[]

// 选择项
const selectedValue = ref<string[]>(defaultValue)

// 更新选择项
const onUpdateValue = (value) => {
  emits('update:modelValue', value)
  selectedValue.value = value
}

const XXXCascader = () => {
  return (
    <div className="xxx-cascader">
      <a-cascader value={selectedValue.value} onUpdate:value={onUpdateValue} {...props} />
    </div>
  )
}
</script>