导入Vuetify 3 v-data-table的DataTableHeader类型脚本

erhoui1w  于 2023-04-12  发布在  Vue.js
关注(0)|答案(2)|浏览(276)

我无法为v-data-table header导入类型定义DataTableHeader。目前,我是这样写的:

import { DataTableHeader } from 'vuetify/types';

在TypeScript错误中,它说
找不到模块“functions.js”或其相应的类型声明。
有人知道这个问题的解决方案吗?

rhfm7lfc

rhfm7lfc1#

Vuetify在lib/labs/components.d.ts处定义了DataTableHeaders类型,但它不会被导出以供外部使用。您可以通过复制此类型来定义自己的类型以在组件中使用。

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' },
  ]
mnemlml8

mnemlml82#

正如@DinhTX已经说过的,DataTableHeaders类型目前没有导出(Vuetify 3.1.13)。我猜这在未来会改变,但与此同时,您仍然可以从VDataTable中提取它:

import { VDataTable } from 'vuetify/lib/labs/components'

type Headers = InstanceType<typeof VDataTable>['headers']

VDataTable是一个构造函数,所以我们用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

相关问题