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:
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:
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:
// 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;
Templates can include complex template data as an argument. To define types for such templates, import the ComponentTypes
declaration and find the type that ends with TemplateData
:
import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid'; import Calendar, { CalendarTypes } from 'devextreme-react/calendar'; // A rendering function const gridCell = (data: DataGridTypes.ColumnCellTemplateData) => { return <span>Custom text</span>; } // A component const CustomCell = ({ data }: { data: CalendarTypes.CellTemplateData }) => { const { text, view } = data; return <span>{ text }</span>; } export default App() { return ( <React.Fragment> <DataGrid> <Column cellRender={gridCell} /> </DataGrid> <Calendar cellComponent={CustomCell} /> </React.Fragment> ); }
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:
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.