我无法为v-data-table header导入类型定义DataTableHeader。目前,我是这样写的:
import { DataTableHeader } from 'vuetify/types';
在TypeScript错误中,它说找不到模块“functions.js”或其相应的类型声明。有人知道这个问题的解决方案吗?
rhfm7lfc1#
Vuetify在lib/labs/components.d.ts处定义了DataTableHeaders类型,但它不会被导出以供外部使用。您可以通过复制此类型来定义自己的类型以在组件中使用。
lib/labs/components.d.ts
type DataTableHeader = { key: string; value?: SelectItemKey; title: string; colspan?: number; rowspan?: number; fixed?: boolean; align?: 'start' | 'end'; width?: number; minWidth?: string; maxWidth?: string; sortable?: boolean; sort?: DataTableCompareFunction; }; const headers:DataTableHeader = [ { title: 'The title', key: 'the_key' }, ]
mnemlml82#
正如@DinhTX已经说过的,DataTableHeaders类型目前没有导出(Vuetify 3.1.13)。我猜这在未来会改变,但与此同时,您仍然可以从VDataTable中提取它:
VDataTable
import { VDataTable } from 'vuetify/lib/labs/components' type Headers = InstanceType<typeof VDataTable>['headers']
(VDataTable是一个构造函数,所以我们用typeof将其转换为一个类型,用InstanceType获取它构造的类型,然后通过索引获取headers属性)。请注意,这会给你DataTableHeader[] | DataTableHeader[][],而不仅仅是DataTableHeader。如果你觉得有必要,你可以进一步解包:
typeof
InstanceType
headers
DataTableHeader[] | DataTableHeader[][]
DataTableHeader
type ArrayArrayItems<T> = T extends Array<Array<infer I>> ? I : never type DataTableHeader = ArrayArrayItems<Headers>
(the ArrayArrayItems丢弃DataTableHeader[]并获取DataTableHeader[][]的项目类型,即DataTableHeader)
ArrayArrayItems
DataTableHeader[]
DataTableHeader[][]
2条答案
按热度按时间rhfm7lfc1#
Vuetify在
lib/labs/components.d.ts
处定义了DataTableHeaders类型,但它不会被导出以供外部使用。您可以通过复制此类型来定义自己的类型以在组件中使用。mnemlml82#
正如@DinhTX已经说过的,DataTableHeaders类型目前没有导出(Vuetify 3.1.13)。我猜这在未来会改变,但与此同时,您仍然可以从
VDataTable
中提取它:(
VDataTable
是一个构造函数,所以我们用typeof
将其转换为一个类型,用InstanceType
获取它构造的类型,然后通过索引获取headers
属性)。请注意,这会给你
DataTableHeader[] | DataTableHeader[][]
,而不仅仅是DataTableHeader
。如果你觉得有必要,你可以进一步解包:(the
ArrayArrayItems
丢弃DataTableHeader[]
并获取DataTableHeader[][]
的项目类型,即DataTableHeader
)