DevExtreme React - TypeScript Support

DevExtreme React components are supplied with TypeScript declarations. Strict typing allows you to catch bugs at earlier stages and use features like code completion and automated refactoring.

The following code shows an example of using TypeScript with DevExtreme components:

App.tsx
import React, { useState } from 'react';
import List from 'devextreme-react/list';
import 'devextreme/dist/css/dx.light.css';

interface IListItemProps {
    text: string;
}

const items: IListItemProps[] = [
    { text: "Item 1" },
    { text: "Item 2" },
    { text: "Item 3" }
];

const Item: React.FC<IListItemProps> = (props) => {
    const [counter, setCounter] = useState<number>(0);

    const addCounter = () => {
        setCounter(counter + 1);
    };

    return (
        <div onClick={addCounter}>
        {props.text} was clicked {counter} times
        </div>
    );
};

const App: React.FC = () => {
    return (
        <List items={items} itemRender={(props: any) => <Item {...props.data} />} />
    );
};

export default App;

Component-Specific Types

To get component-specific types, import the ComponentTypes declaration where Component is the component name:

App.tsx
import DateBox, { DateBoxTypes } from 'devextreme-react/date-box';

const dateType: DateBoxTypes.DateType = 'datetime';

function App() {
    return (
        <DateBox type={dateType} />
    );
}
</script>

If you need the same type for multiple components, you can also import this type from common submodule:

App.tsx
// In the sample below, ValidationRule is imported for each component:

import { DataGridTypes } from 'devextreme-react/data-grid';
import { FormTypes } from 'devextreme-react/form';

const dataGridValidationRule: DataGridTypes.ValidationRule;
const formValidationRule: FormTypes.ValidationRule;

// In the sample below, ValidationRule is imported from the common submodule:

import { ValidationRule } from 'devextreme-react/common';

const dataGridValidationRule: ValidationRule;
const formValidationRule: ValidationRule;

Generics Usage

DevExtreme supports Generics for properties and methods that operate internal data. You can use Generics inside event handlers and to define instances of data-aware components like DataGrid:

App.tsx
import { useRef } from 'react';
import service, { Employee } from './data';
import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';

function onEditorPreparing(e: DataGridTypes.EditorPreparingEvent<Employee, number>) {
    if (e.dataField === 'LastName' && e.parentType === 'dataRow') {
        e.editorOptions.disabled = e.row?.data && e.row?.data.FirstName === '';
    }
}

function App() {
    const dataGrid = useRef<DataGrid<Employee, number>>(null);

    const onButtonClick = () => {
        const dataGridInstance = dataGrid.current!.instance;
        dataGridInstance.option("disabled", true);
    }

    return (
        <Button
            text={"Disable DataGrid"}
            onClick={onButtonClick}
        />
        <DataGrid<Employee, number>
            ref={dataGrid}
            onEditorPreparing={onEditorPreparing}
            dataSource={dataSource}>
        </DataGrid>
    );
    }

export default App;