Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Export TS types, interfaces #16680

Open
websitevirtuoso opened this issue Feb 16, 2023 · 28 comments
Open

[Feature Request] Export TS types, interfaces #16680

websitevirtuoso opened this issue Feb 16, 2023 · 28 comments
Assignees
Labels
framework Issues and Feature Requests that have needs framework-wide. T: enhancement Functionality that enhances existing features typescript

Comments

@websitevirtuoso
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link

aentwist commented Jun 2, 2023

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
Copy link
Contributor Author

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
Copy link

felicienfrancois commented Jun 26, 2023

@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

This comment was marked as off-topic.

@nowaysgit
Copy link

nowaysgit commented Jul 3, 2023

@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 }>;

image

@felicienfrancois
Copy link

@nowaysgit

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

@MatthewAry
Copy link
Contributor

MatthewAry commented Sep 12, 2023

See the following for references and examples:

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
Copy link
Contributor Author

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
Copy link
Contributor

@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
Copy link
Member

KaelWD commented Sep 14, 2023

  • 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

@KaelWD KaelWD reopened this Sep 14, 2023
@npbenjohnson
Copy link

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
Copy link

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

@MatthewAry
Copy link
Contributor

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

@MatthewAry
Copy link
Contributor

MatthewAry commented Nov 13, 2023

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
Copy link
Contributor

MatthewAry commented Nov 14, 2023

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
Copy link
Contributor

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

@MatthewAry
Copy link
Contributor

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

@volarname
Copy link
Contributor

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
Copy link
Contributor

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

@throrin19
Copy link

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
Copy link

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
Copy link

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

@mcfarljw
Copy link

mcfarljw commented Mar 4, 2024

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
Copy link
Contributor

Looking to get prop types for DataTables?

type VDataTableProps = InstanceType<typeof VDataTable>['$props']
Screenshot 2024-03-26 at 6 38 02 PM

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

@msladek
Copy link

msladek commented Mar 27, 2024

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
Copy link

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
Copy link

ramseyfeng commented Jul 1, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
framework Issues and Feature Requests that have needs framework-wide. T: enhancement Functionality that enhances existing features typescript
Projects
None yet
Development

No branches or pull requests