导入Vuetify3 v-data表的DataTableHeader类型的typescript &g

Question

我不能为v-data-table头导入类型定义DataTableHeader。目前，我是这样写的:

import { DataTableHeader } from 'vuetify/types';

在TypeScript错误中，它说

无法找到模块'vuetify/types'或其相应的类型声明。

有谁知道这个问题的解决方法吗?

Answer 1

@DinhTX已经说过，DataTableHeaders类型目前不被导出(Vuetify 3.3.0)。我的猜测是，这将在未来改变，但在此期间，您仍然可以从VDataTable中提取它。

Vuetify 3.3 +

在v3.3中，它们的头文件是深度只读的，这有点不幸。我们可以撤销readonly，但不能不改变类型，这使得它与初始的DataTableHeader声明不兼容，并且在给v-data表赋值时需要额外的类型断言。

所以如果你知道你不需要修改头文件在声明之后，我将只使用只读声明:

import type { VDataTable } from 'vuetify/lib/labs/components.mjs'
type UnwrapReadonlyArrayType<A> = A extends Readonly<Array<infer I>> ? UnwrapReadonlyArrayType<I> : A
type DT = InstanceType<typeof VDataTable>;
type ReadonlyDataTableHeader = UnwrapReadonlyArrayType<DT['headers']>;

(解释见下面的旧版本)

---

然而，如果你需要改变声明后的头，您可以使用另一个实用程序类使它们可变:

type DeepMutable<T> = { -readonly [P in keyof T]: DeepMutable<T[P]> }
type DataTableHeader = DeepMutable<ReadonlyDataTableHeader>;

(DeepMutable实用程序类将输入类型递归映射为新类型，删除任何readonly修饰符)

现在，如果您将DataTableHeader[]分配给:headers支柱，TS将抱怨DeepMutable[]不能分配给DeepReadonly[]，但由于我们已经知道类型匹配，我们可以告诉它闭嘴:

<v-data-table
:headers="(headers as any)"

---

Until Vuetify 3.3

import { VDataTable } from 'vuetify/lib/labs/components'
type Headers = InstanceType<typeof VDataTable>['headers']

(VDataTable是一个构造函数，所以我们用typeof把它变成一个类型，用InstanceType得到它构造的类型，然后通过索引得到headersprop)

注意，这给出了DataTableHeader[] | DataTableHeader[][]，而不仅仅是DataTableHeader。如果您觉得有必要，您可以进一步展开它:

type UnwrapArrayType<A> = A extends Array<infer I> ? UnwrapArrayType<I> : A
type DataTableHeader = UnwrapArrayType<Headers>

(UnwrapArrayType递归地从数组类型中提取项目类型，直到没有数组剩余，此时我们有DataTableHeader)

Answer 2

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