Typescript errors with KendoReact like error TS2430: Interface 'GridCellProps' incorrectly extends interface 'CellProps'.

[Alex]

I am using vite to build.

npm run build

This is what i get in the vs-code console.

> tsc && vite build

node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridCellProps.d.ts:8:18 - error TS2430: Interface 'GridCellProps' incorrectly extends interface 'CellProps'.
  Types of property 'onChange' are incompatible.
    Type '((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | undefined' is not assignable to type '((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | undefined'.
      Type '(event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any;
}) => void' is not assignable to type '(event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void'.
        Types of parameters 'event' and 'event' are incompatible.
          Property 'dataIndex' is missing in type '{ dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }' but required in type '{ dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }'.

8 export interface GridCellProps extends CellProps {
                   ~~~~~~~~~~~~~

  node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridCellProps.d.ts:40:9
    40         dataIndex: number;
               ~~~~~~~~~
    'dataIndex' is declared here.

node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridColumnProps.d.ts:12:18 - error TS2430: Interface 'GridColumnProps' incorrectly extends interface 'ColumnBaseProps'.
  Types of property 'cell' are incompatible.
    Type 'ComponentType<GridCellProps> | undefined' is not assignable to type 'ComponentType<CellProps> | undefined'.
      Type 'ComponentClass<GridCellProps, any>' is not assignable to type 'ComponentType<CellProps> | undefined'.
        Type 'ComponentClass<GridCellProps, any>' is not assignable to type 'ComponentClass<CellProps, any>'.
          Types of property 'propTypes' are incompatible.
            Type 'WeakValidationMap<GridCellProps> | undefined' is not assignable to type 'WeakValidationMap<CellProps> | undefined'.    
              Type 'WeakValidationMap<GridCellProps>' is not assignable to type 'WeakValidationMap<CellProps>'.
                Types of property 'onChange' are incompatible.
                  Type 'Validator<((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined> | undefined' is not assignable to type 'Validator<((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined> | undefined'.
                    Type 'Validator<((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined>' is not assignable to type 'Validator<((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined>'.
                      Type '((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined' is not assignable to type '((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined'.
                        Type '(event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void' is not assignable to type '(event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string
| undefined; value?: any; }) => void'.

12 export interface GridColumnProps extends ColumnBaseProps {
                    ~~~~~~~~~~~~~~~

node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridHeaderCellProps.d.ts:8:18 - error TS2430: Interface 'GridHeaderCellProps' incorrectly extends interface 'HeaderCellBaseProps'.
  Types of property 'render' are incompatible.
    Type '((defaultRendering: ReactNode, props: GridHeaderCellProps) => ReactNode) | undefined' is not assignable to type '((defaultRendering: ReactNode, props: HeaderCellBaseProps) => ReactNode) | undefined'.
      Type '(defaultRendering: ReactNode, props: GridHeaderCellProps) => ReactNode' is not assignable to type '(defaultRendering: ReactNode,
props: HeaderCellBaseProps) => ReactNode'.
        Types of parameters 'props' and 'props' are incompatible.
          Property 'columnMenuWrapperProps' is missing in type 'HeaderCellBaseProps' but required in type 'GridHeaderCellProps'.

8 export interface GridHeaderCellProps extends HeaderCellBaseProps {
                   ~~~~~~~~~~~~~~~~~~~

  node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridHeaderCellProps.d.ts:16:5
    16     columnMenuWrapperProps: GridColumnMenuWrapperProps;
           ~~~~~~~~~~~~~~~~~~~~~~
    'columnMenuWrapperProps' is declared here.


Found 3 errors.

 

Do i need some special settings for my tsconfig.json?

[Stefan]

Hello,

Thank you for reporting this I assume this occurs with a specific version of TypeScript 

Could you please share the package.json and the  tsconfig.json files as this will help us re-create the setup and inspect why this occurs?

[Alex]

Tnak you for your answer, here are my files:

tsconfig.json

// see https://www.typescriptlang.org/tsconfig/
{
    "compilerOptions": {
        "target": "ES6",
        "lib": [ "DOM", "DOM.Iterable", "ESNext" ],
        "types": [ "vite/client", "vite-plugin-svgr/client" ],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
        "allowUnreachableCode": false,
        "noFallthroughCasesInSwitch": false,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": true
    },
    "include": [ "./src" ],
    "exclude": [ "node_modules" ]
}

 

package.json

{
   "name": "test",
   "version": "1.0.0",
   "scripts": {
      "prestart": "node aspnetcore-https && node aspnetcore-react",
      "start": "vite",
      "dev": "vite",
      "build": "tsc && vite build",
      "serve": "vite preview",
      "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
      "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
      "lint": "yarn lint:format && yarn lint:fix ",
      "type-check": "tsc"
   },
   "dependencies": {
      "@popperjs/core": "^2.10.2",
      "@progress/kendo-data-query": "^1.5.5",
      "@progress/kendo-drawing": "^1.16.0",
      "@progress/kendo-licensing": "^1.2.1",
      "@progress/kendo-react-animation": "^4.12.0",
      "@progress/kendo-react-buttons": "^4.12.0",
      "@progress/kendo-react-data-tools": "^4.12.0",
      "@progress/kendo-react-dateinputs": "^4.12.0",
      "@progress/kendo-react-dropdowns": "^4.12.0",
      "@progress/kendo-react-grid": "^4.12.0",
      "@progress/kendo-react-indicators": "^4.12.0",
      "@progress/kendo-react-inputs": "^4.12.0",
      "@progress/kendo-react-intl": "^4.12.0",
      "@progress/kendo-react-layout": "^4.12.0",
      "@progress/kendo-react-popup": "^4.12.0",
      "@progress/kendo-react-progressbars": "^4.12.0",
      "@progress/kendo-react-treeview": "^4.12.0",
      "@progress/kendo-theme-bootstrap": "^4.42.0",
      "@svgr/core": "^5.5.0",
      "bootstrap": "5.1.3",
      "react": "^17.0.2",
      "react-bootstrap": "^2.0.2",
      "react-dom": "^17.0.2",
      "react-is": "^17.0.2",
      "react-router-dom": "^6.0.2",
      "styled-components": "^5.3.3",
      "vite-plugin-svgr": "^0.6.0"
   },
   "devDependencies": {
      "@types/react": "^17.0.14",
      "@types/react-dom": "^17.0.9",
      "@types/react-router-dom": "^5.3.2",
      "@types/styled-components": "5.1.15",
      "@typescript-eslint/eslint-plugin": "^4.28.2",
      "@typescript-eslint/parser": "^4.28.2",
      "@vitejs/plugin-react-refresh": "^1.3.6",
      "eslint": "^7.30.0",
      "eslint-config-prettier": "^8.3.0",
      "eslint-plugin-import": "^2.23.4",
      "eslint-plugin-jsx-a11y": "^6.4.1",
      "eslint-plugin-prettier": "^3.4.0",
      "eslint-plugin-react": "^7.24.0",
      "eslint-plugin-simple-import-sort": "^7.0.0",
      "pre-commit": "^1.2.2",
      "prettier": "^2.3.2",
      "typescript": "^4.4.4",
      "vite": "^2.6.13"
   },
   "pre-commit": "lint",
   "license": "commercial"
}

 

 

[Stefan]

Hello,

Thank you for the extra information.

I think that this will be addressed with this item that we have logged:

https://github.com/telerik/kendo-react/issues/1097

Until this is done, a workaround will be to set the skipLibCheck option to true. We know that this is not ideal, but it is the only available workaround at this point:

https://www.typescriptlang.org/tsconfig#skipLibCheck

Regards,
Stefan
Progress Telerik