DataTableFilterMeta TypeScript error

[colinbes]

I didn't see a codesandbox template for primevue using typescript but here is github link to project demonstrating the issue https://github.com/colinbes/primevue-ts.

I have commented observations in the readme file.

Current Behavior

For primevue versions > 3.10.0 typescript projects fail to build as they fail typecript test - specifically in my case setting of filters for DataTable <DataTable :value="actions" :rowHover="true" v-model:filters="filters"></DataTable> this has type error for filters stating ... is not assignable to type 'DataTableFilterMeta'

Note, that it is also unclear how to create a custom filter - included in example is custom filter for filter program - it is unclear how one is meant to define the matchMode for filter.

Expected Behavior

Interfaces and type checking should work for standard FilterMatchMode.xxx as well as allow for defining custom matchMode names.

Reproduction of issue

Clone project https://github.com/colinbes/primevue-ts and follow instructions in README to install and run TSC (via npm run tsc)

Note, this problem does not appear to be related to only Vite as I could replicate exact same behavior creating project using vue-cli

[colinbes]

Hopefully I hear back from someone soon as it appears TS is pretty broken (unless some issue my side).

I also have issues with DataView.

<script setup lang="ts">
import { ref } from 'vue'
const layout = 'grid'
const dashItems = [{
  title: 'Item1', 
  url: '/Favorites'
}, {
  title: 'Item2',
  url: 'dsds'
}]

</script>

<template>
<DataView :value="dashItems" :layout="layout">
  <template #empty>No records found.</template>
  <template #header>
    A header
  </template>
  <template #grid="slotProps">
    <div>{{slotProps.data}}</div>
  </template>
</DataView>
</template>

<style scoped lang="postcss">
</style>

Give TS error:

src/views/Home.vue:15:31 - error TS2322: Type 'string' is not assignable to type 'DataViewLayoutType'.
15 <DataView :value="dashItems" :layout="layout">

Code is from composition api example on primevue - DataView webpage

[tugcekucukoglu]

Thanks for the great repo. It really helped. Please also create separate issues for different bugs.

Regards,

[sid-6581]

This is broken again in 3.24.0 after the typescript types were removed. Please reopen. FilterMatchMode members are no longer assignable to DataTableFilterMetaData.matchMode, I have to cast the types or use the raw strings like "gte" instead of the FilterMatchMode values.

[tugcekucukoglu]

The team decided to remove typescript types. You could see the breaking changes from here #3696

[sid-6581]

The team decided to remove typescript types. You could see the breaking changes from here #3696

Thanks for the quick reply! I did see the breaking changes and it seemed intentional, but I didn't see the reason for it? I'm also not sure how we're supposed to use the filters with TypeScript now, do you have a suggestion? I assume PrimeVue is still intended to fully support TypeScript?

[colinbes]

Not fully supporting typescript is an issue and one of the reasons why I have been looking at other options besides vue which wasn't an easy decision.

[tugcekucukoglu]

PrimeVue supports TypeScript but with some changes according to previous versions. I also asking following this issue #3727

Thanks for your understanding.

[borsTiHD]

I have the same issue... updated primevue today to 3.24.0 and getting the type error.
As a workaround you can use something like this:

import type { DataTableFilterMetaData } from 'primevue/datatable'

const filters = ref({
    'global': { value: null as null | string, matchMode: FilterMatchMode.CONTAINS } as DataTableFilterMetaData,
    'type': { value: null as null | Array<number>, matchMode: FilterMatchMode.IN } as DataTableFilterMetaData
})

[markus-ethur-kc]

@borsTiHD
Didn't work here, still the same issue ...

The way it worked here using the 3.25.0 version....

[col]: {
   value: null,
   matchMode: FilterMatchMode["CONTAINS"],
} as DataTableFilterMetaData,