[Feature Request] Export TS types, interfaces

[websitevirtuoso]

Problem to solve

Let's consider next struct

const headers: DataTableHeader[] = [
  { title: '#', key: 'id' },
  { title: t('messages.name'), key: 'name' },
  { title: t('messages.lat'), key: 'lat' },
  { title: t('messages.lng'), key: 'lng' },
  { title: t('messages.state'), key: 'state', value: 'state.name', sortable: false },
  { title: t('messages.country'), key: 'country', value: 'state.country.name', sortable: false },
]
if(can('upsert', 'city')) {
  headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}

We as developers don't have access to defined types, interfaces as a result in my project I have to duplicate the same TS types

Proposed solution

Just add export to types, interfaces that you already defined

[joel-wenzel]

@websitevirtuoso I agree this should be done, i did find a workaround for now though:

import { VDataTable } from 'vuetify/lib/labs/components'
export type VDataTableHeaderProps = Extract<
  VDataTable['$props']['headers'][number],
  DataTableHeader[]
>[number]

I do get a somewhat misleading typescript error for unresolved type on DataTableHeader but it does in fact still work.

[aentwist]

This is very specifically about Labs, right? There is currently nothing to export anything other than the components.

Edit: I see the Anchor issue. Looks like this issue is being purposed for all of Vuetify

[websitevirtuoso]

I have no idea about all types. Because I used only types from datatable. I had to copy this types into my own code and use them with "todo commend". I hope that they will create index.d.ts for us with exported types and interfaces

[felicienfrancois]

@joel-wenzel a simpler variant with no typescript error

import { VDataTable } from 'vuetify/labs/VDataTable';
export type VDataTableHeaderProps = Extract<VDataTable['$props']['headers'][number], {key: string}>

[nowaysgit]

@joel-wenzelболее простой вариант без ошибок машинописного текста

import { VDataTable } from 'vuetify/labs/VDataTable';
export type VDataTableHeaderProps = Extract<VDataTable['$props']['headers'][number], {key: string}>

very sad situation
vuetify: 3.3.6
typescript: 5.1.6
vue-tsc: 1.8.3

error TS2537: Type 'DeepReadonly<DataTableHeader[] | DataTableHeader[][]> | undefined' has no matching index signature for type 'number'.

export type VDataTableHeaderProps = Extract<VDataTable["$props"]["headers"][number], { key: string }>;

[felicienfrancois]

@nowaysgit

export type VDataTableHeaderProps = Extract<Extract<VDataTable["$props"]["headers"], Readonly<Array>>[number], {key: string}>

[MatthewAry]

See the following for references and examples:

• https://vuejs.org/guide/typescript/composition-api.html
• https://www.radix-vue.com/guides/styling.html#extending-a-primitive

This is what I would like to be able to do but currently cannot.

<script setup lang="ts">
import { VCard, type VCardProps } from "vuetify/components/VCard";

interface Props extends VCardProps {
  foo: string;
}

const props = defineProps<Props>();
</script>

<template>
  <VCard v-bind="props" />
</template>

[websitevirtuoso]

Yes I can confirm that rignt now is much better with exports types and interfaces.

For example:
my code before:

import { DataTableHeader } from '@/types/vuetify'

const headers: DataTableHeader[] = [
  { title: '#', key: 'id', sortable: false },
  { title: t('messages.name'), key: 'name', sortable: false },
  { title: t('messages.description'), key: 'description', sortable: false },
]

if (can('update', 'listing_term')) {
  headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}

my file @/types/vuetify with all duplicated types from vuetify
code after refactoring vuetify and using their types

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

const headers: VDataTableColumn[] = [
  { title: '#', key: 'id', sortable: false },
  { title: t('messages.name'), key: 'name', sortable: false },
  { title: t('messages.description'), key: 'description', sortable: false },
]

if (can('update', 'listing_term')) {
  headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}

So can I close this issue?

[MatthewAry]

@websitevirtuoso I don't think so. It seems like the team has expanded the scope of this issue such that it's be come a META issue.

[KaelWD]

• VDataTableColumn is a component not a type, I have no idea how that is working. There isn't even a VDataTableColumn.d.ts
• vuetify/lib is not supported
• DataTableHeader and other types are still not exported

[npbenjohnson]

Workaround tested in ts 5.1 but should work in some older versions:
import type { VDataTable } from "vuetify/labs/VDataTable";
// For array props
type VDataTableHeader = Exclude<NonNullable<VDataTable["$props"]["headers"]>[number], Readonly<unknown[]>>;
// For non-array props
type SortItem = NonNullable<VDataTable["$props"]["sortBy"]>[number];

[SergioFerrando]

DataTableHeader and other types are still not exported. Any solution for this?? : (

[MatthewAry]

@KaelWD Perhaps a solution to making component prop types accessible could be found at packages/component-meta

[MatthewAry]

I found a partial solution.

import { VSheet } from 'vuetify/components';
import { type ExtractPropTypes } from 'vue'

type VSheetPropTypes = Partial<ExtractPropTypes<typeof VSheet>>

I say partial because while you can get all of the prop types using this trick, there is a bunch of other unnecessary stuff in the types that get resolved that I can't seem to use Omit to remove, including:

• $
• $attrs
• $children
• $data
• $el
• $emit
• $forceUpdate
• $nextTick
• $options
• $parent
• $props
• $refs
• $root
• $slots
• $watch
• __isFragment
• __isSuspense
• __isTeleport

[MatthewAry]

Perhaps https://vuejs.org/api/utility-types.html#extractpublicproptypes ExtractPublicPropTypes<T> would be better?

Update: Not seeing a significant difference, but it would probably be better to use this anyways.

[MatthewAry]

ValidationRule should also get exported. https://github.com/vuetifyjs/vuetify/blob/b87b28f72990ca0227906a266bbb58793332fcb8/packages/vuetify/src/composables/validation.ts#L15C1-L20C52

[MatthewAry]

This doesn't seem to work with Vuetify Component Types either. https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers

[volarname]

i asbolutely aggree that vuetify needs more type/interfaces export. probably not whole component props but complex types used in props like DataTableHeader, DataTableSelectStrategy and similar
of course it can be done by 3rd party @types library where types will be copy/pasted from vuetify library but as vuetify 3 is written completely in typescript and its just about the build scripts of existing types the best way will be to officially support it and exort in vuetify d.ts files

[MatthewAry]

For reference there is this conversation happening on Discord about extending components and passing types up. https://discord.com/channels/340160225338195969/1192558069343854612

[throrin19]

This is very specifically about Labs, right? There is currently nothing to export anything other than the components.

Edit: I see the Anchor issue. Looks like this issue is being purposed for all of Vuetify

Any news about the Anchor part ? If we made a props used in location props of VMenu or VTooltip, we can't use it because it must be Anchor | undefined but we can't import Anchor....

[lenargum]

This is very specifically about Labs, right? There is currently nothing to export anything other than the components.
Edit: I see the Anchor issue. Looks like this issue is being purposed for all of Vuetify

Any news about the Anchor part ? If we made a props used in location props of VMenu or VTooltip, we can't use it because it must be Anchor | undefined but we can't import Anchor....

Here is dirty workaround if anyone interested. Just declare Anchor type manually 😁

declare const block: readonly ["top", "bottom"];
declare const inline: readonly ["start", "end", "left", "right"];
type Tblock = typeof block[number];
type Tinline = typeof inline[number];
type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;

[throrin19]

@lenargum this is not a long term solution. For that vuetify team must export it.

[mcfarljw]

I find myself wanting to get the exported interface shape of emitted events frequently. I don't see it mentioned specifically here so I'm posting in my use case with needing the typings from emitted events for reference:

// Vuetify
export interface SomeVuetifyEmitEvent { 
    id: unknown
    value: boolean
    path: unknown[]
    event: MouseEvent | PointerEvent
}

emits: {
    'update:selected': (value: unknown[]) => true,
    'update:opened': (value: unknown[]) => true,
    'click:open': (value: SomeVuetifyEmitEvent) => true,
    'click:select': (value: SomeVuetifyEmitEvent) => true,
},

// Client
import type { SomeVuetifyEmitEvent } from 'vuetify/VSelect'

function onSortSelect(event: SomeVuetifyEmitEvent) {
    const id = event.id as string
    const paths event.paths as string[]
}

[MatthewAry]

Looking to get prop types for DataTables?

type VDataTableProps = InstanceType<typeof VDataTable>['$props']

This might help until the promised day of better types comes.

[msladek]

How do I get at generic types like DataTableItem<T>, ItemSlotBase<T> and ItemKeySlot<T> needed for cell-props or row-props as a workaround?

[jscottsf]

In case anyone is trying to do this with JSDoc -- this works.

    <v-data-table
      v-model:items-per-page="table.itemsPerPage"
      v-model:sort-by="table.sortBy"
      :headers="table.headers"
      :loading="loading"
      :items="scores"
      :items-per-page-options="table.itemsPerPageOptions"
    >
...

<script>
/**
 * @typedef { import("vuetify/components").VDataTable["$props"]["headers"] } VDataTableHeaders
 * @typedef { import("vuetify/components").VDataTable["$props"]["sortBy"] } VDataTableSortItems
 */
</script>

<script setup>
const table = reactive({
  /** @type {VDataTableHeaders} */
  headers: [
    { sortable: true, title: 'Label', value: 'label' },
    { align: 'end', sortable: true, title: 'Score', value: 'score' }
  ],
  itemsPerPage: 5,
  itemsPerPageOptions: [
    { value: 5, title: '5' },
    { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' }
  ],
  /** @type {VDataTableSortItems} */
  sortBy: [{ key: 'score', order: 'desc' }]
})
...

[ramseyfeng]

Any update on this issue? We want to access the type definition of location...

[davidstackio]

To get my headers working without the typescript error I used as const as suggested here #19599.

Example:

<script setup lang="ts">
const headers = [
  {
    title: "Dessert (100g serving)",
    align: "start",
    sortable: false,
    key: "name",
  },
  { title: "Calories", key: "calories", align: "end" },
  { title: "Fat (g)", key: "fat", align: "end" },
  { title: "Carbs (g)", key: "carbs", align: "end" },
  { title: "Protein (g)", key: "protein", align: "end" },
  { title: "Iron (%)", key: "iron", align: "end" },
] as const;
</script>