问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

defineProps<Props> 中Props类型限制？

头像
你好啊你好
    41912070
    type FilterComponentsItem = 'Select' | 'Input' | 'DatePicker';
type AntProps<T extends FilterComponentsItem = FilterComponentsItem> = InstanceType<
  (typeof import('ant-design-vue/es'))[T]
>['$props'];
type Props<T extends FilterComponentsItem = FilterComponentsItem> = {
  FilterComponentsItemType: T;
} & AntProps<T>;
const { FilterComponentsItemType } = defineProps<Props>();

let a: InstanceType<(typeof import('ant-design-vue/es'))['Select']>['$props'] = {
  status: 'error'
};
let b: Props = {
  FilterComponentsItemType: 'Select',
  status: ''
};

    vite提示识别不了。
    image.png

    但是为什么vue文件没有问题？都有提示的。
    image.png

    这个要怎么改啊？

    Microsoftvue3typescript
    阅读 642
    avatarAI BotBETA

    这个问题似乎与Vue 3的Composition API和Ant Design Vue库有关。你似乎在使用Vue 3的Composition API来定义Props，然后试图将这些Props与Ant Design Vue组件的props合并。然而，你遇到了类型错误。

    首先，让我们看一下你的代码：

    type FilterComponentsItem = 'Select' | 'Input' | 'DatePicker';
type AntProps<T extends FilterComponentsItem = FilterComponentsItem> = InstanceType<
  (typeof import('ant-design-vue/es'))[T]
>['$props'];
type Props<T extends FilterComponentsItem = FilterComponentsItem> = {
  FilterComponentsItemType: T;
} & AntProps<T>;
const { FilterComponentsItemType } = defineProps<Props>();

    这段代码定义了一个Props类型，它包含一个名为FilterComponentsItemType的属性，该属性的类型为FilterComponentsItem中的一个值。同时，它还包含Ant Design Vue组件的props，这些props的类型由AntProps<T>定义。

    然而，你的代码在处理Ant Design Vue组件的props时存在一些问题。AntProps<T>类型实际上是尝试获取Ant Design Vue组件的$props属性，但是Ant Design Vue组件并没有$props属性。因此，你需要找到一个正确的方式来定义Ant Design Vue组件的props类型。

    你可以尝试使用Ant Design Vue库的类型定义来获取组件的props类型。这通常可以在库的.d.ts文件中找到。然后，你可以将这些props类型与你的自定义props类型合并。

    例如，如果你使用的是Ant Design Vue 4，那么你可以在ant-design-vue/dist/antd.d.ts文件中找到每个组件的props类型定义。然后，你可以像这样定义你的Props类型：

    import { defineProps } from 'vue';
import { SelectProps } from 'ant-design-vue';

type FilterComponentsItem = 'Select' | 'Input' | 'DatePicker';
type Props<T extends FilterComponentsItem> = {
  FilterComponentsItemType: T;
} & SelectProps; // 假设你正在使用Select组件
const { FilterComponentsItemType } = defineProps<Props>();

    注意，我将AntProps<T>更改为SelectProps，这应该是你正在使用的Ant Design Vue组件的props类型。这样，你的Props类型现在应该正确地包含了Ant Design Vue组件的props。

    1 个回答
    得票最新
    头像
    kkopite
      2.1k1913
      查看全部 1 个回答
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏