typescript - defineProps<Props> 中Props类型限制？

Question

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提示识别不了。

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

这个要怎么改啊？

Answer 1

因为@vue/compiler-sfc不支持InstanceType，编辑器里vue文件有提示里是因为ts在处理

https://github.com/vuejs/core/blob/a6503e3e77b04a1ab8c07078e07091b06d51131d/packages/compiler-sfc/src/script/resolveType.ts#L589-L595

const SupportedBuiltinsSet = new Set([  'Partial',  'Required',  'Readonly',  'Pick',  'Omit'] as const)

Answer 2

这个问题似乎与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。