Broken DataTable filter - Type 'string' is not assignable to type 'DataTableFilterMatchModeType'.

[colinbes]

I am unable to set filter match mode for DataTable with vue-tsc showing error:

src/components/Test.vue:9:64 - error TS2322: Type 'string' is not assignable to type 'DataTableFilterMatchModeType'.

Simple code example demonstrates issue with setting up matchMode.

<script setup lang="ts">
import all from 'primevue/api'
import { DataTableFilterMetaData } from 'primevue/datatable'
import { FilterMatchMode } from 'primevue/api'

const filterMetaData1: DataTableFilterMetaData = {value: null, matchMode: 'equals'}
const filterMetaData2: DataTableFilterMetaData = {value: null, matchMode: FilterMatchMode.EQUALS}
</script>

• filterMetaData1 gives no tsc error

• filterMetaData2 gives tsc error shown below:

❯ npm run tsc

> my-vue-app@0.0.0 tsc
> vue-tsc --noEmit

src/components/Test.vue:7:64 - error TS2322: Type 'string' is not assignable to type 'DataTableFilterMatchModeType'.

7 const filterMetaData2: DataTableFilterMetaData = {value: null, matchMode: FilterMatchMode.EQUALS}
                                                                 ~~~~~~~~~
  node_modules/primevue/datatable/DataTable.d.ts:58:5
    58     matchMode: DataTableFilterMatchModeType;
           ~~~~~~~~~
    The expected type comes from property 'matchMode' which is declared here on type 'DataTableFilterMetaData'

Found 1 error.

package.json

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "tsc": "vue-tsc --noEmit",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "primeicons": "^5.0.0",
    "primevue": "^3.12.0",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@types/node": "^17.0.18",
    "@vitejs/plugin-vue": "^2.2.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}

[colinbes]

I have traced issue back to 9a9ae86 where interfaces were modified. All in all I like the idea but in my case it doesn't work. I assume others must also be having the issue.

If I roll primevue back to 3.9.1 then build and tsc work (note I have tried creating project with vite and vue-cli - in all cases with typescript support.

[colinbes]

I found using 'as' Type Assertion as DataTableFilterMetaData helps solves the issue (at least as a temp measure).

// Working example
const myFilters = ref({
  'action': { value: 'asd', matchMode: FilterMatchMode.EQUALS} as DataTableFilterMetaData
})

// None working example
const myFilters = ref({
  'action': { value: 'asd', matchMode: FilterMatchMode.EQUALS}
})

[tugcekucukoglu]

Please track at #2196