global typescript interface cannot be used by defineProps

351 阅读1分钟

报错代码

在vue中直接使用下面的代码会报错,代码如下

/src/types/global.d.ts

import type { UIFormProps as UIFormPropsA } from '@ui/UIForm/type'

declare global {
  /**
   * UIForm表单属性
   */
  type UIFormProps = UIFormPropsA
}

xxxx.vue

<template>
  <div></div>
</template>
<script setup lang="ts">

const props = withDefaults(defineProps<UIFormProps>(), {
  gutter: 32,
  span: 12,
  autoLink: true,
  colon: true,
  labelAlign: 'right',
  hideRequiredMark: false,
  validateOnRuleChange: true,
  scrollToFirstError: true,
  okText: '保存',
})

</script>

报错信息

[vite] Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

image.png

报错的疑虑

虽然上面的代码会报错,但是不在defineeProps中使用代码运行起来也不会报错:

const a = {} as UIFormProps

解决办法

添加如下代码并重新启动,代码就不会报错了

vue({
  script: {
    globalTypeFiles: [
      './src/types/global.d.ts'
    ]
  }
})

image.png

参考

github.com/vuejs/core/…