DevExtreme React - Scopes of Types

If you build an application with DevExtreme components in TypeScript, you need to work with DevExpress types. Review the following sections for instructions on how to correctly use component-specific types and types shared by multiple controls/libraries. It also explains how to identify internal DevExpress infrastructure types that you should avoid in your applications.

Component-Specific Types

jQuery

Each DevExtreme component has its own set of types. To access these types, specify DevExpress.ui.dxComponent where Component is the component name in camel case. Your IDE should give you a list of available types.

const dateType: DevExpress.ui.dxDateBox.DateType = 'datetime';
Angular

Each DevExtreme component has its own set of types. Use aggregated exports to import all component types with a single statement (refer to the Aggregated Export help topic for more information).

Import DxComponentTypes (an aggregated export) where Component is the component name. For example, you need to import DxDateBoxTypes if you work with a DateBox.

app.component.ts
app.component.html
import { Component } from '@angular/core';
import { DxDateBoxTypes } from 'devextreme-angular/date-box';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dateType: DxDateBoxTypes.DateType = "datetime";
}
<dx-date-box ...
    [type]="dateType"
>
</dx-date-box>

After importing, type DxDateBoxTypes. to search through all available types.

Vue

Each DevExtreme component has its own set of types. Use aggregated exports to import all component types with a single statement (refer to the Aggregated Export help topic for more information).

Import DxComponentTypes (an aggregated export) where Component is the component name. For example, you need to import DxDateBoxTypes if you work with a DateBox.

App.vue
<template>
    <DxDateBox :type="dateType" />
</template>

<script setup lang="ts">
import DxDateBox from "devextreme-vue/date-box";
import type { DxDateBoxTypes } from "devextreme-vue/date-box";

const dateType: DxDateBoxTypes.DateType = "datetime";
</script>

After importing, type DxDateBoxTypes. to search through all available types.

React

Each DevExtreme component has its own set of types. Use aggregated exports to import all component types with a single statement (refer to the Aggregated Export help topic for more information).

Import ComponentTypes (an aggregated export) where Component is the component name. For example, you need to import DateBoxTypes if you work with a DateBox.

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

const dateType: DateBoxTypes.DateType = 'datetime';

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

export default App;

After importing, type DateBoxTypes. to search through all available types.

Common Types

Each component includes the necessary types under its alias. However, if multiple components use the same type on the same page, it might be unclear which module to import from. In such cases, import the types from the common module.

jQuery

You can find common types under the following aliases:

  • DevExpress.common

  • DevExpress.common.charts

  • DevExpress.common.grids

const toolbarItemsLocation: DevExpress.common.ToolbarItemLocation;
Angular
app.component.ts
// In the sample below, ValidationRule is imported for each component:

import { Component } from '@angular/core';
import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
import { DxFormTypes } from 'devextreme-angular/ui/form';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dataGridValidationRule: DxDataGridTypes.ValidationRule;
    formValidationRule: DxFormTypes.ValidationRule;
}

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

import { Component } from '@angular/core';
import { ValidationRule } from 'devextreme/common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dataGridValidationRule: ValidationRule;
    formValidationRule: ValidationRule;
}

Alternatively, define a union:

type ValidationRule = DxDataGridTypes.ValidationRule | DxFormTypes.ValidationRule;
const validationRule: ValidationRule;
Vue
App.vue
// In the sample below, ValidationRule is imported for each component:

import { DxDataGridTypes } from 'devextreme-vue/data-grid';
import { DxFormTypes } from 'devextreme-vue/form';

const dataGridValidationRule: DxDataGridTypes.ValidationRule;
const formValidationRule: DxFormTypes.ValidationRule;

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

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

const dataGridValidationRule: ValidationRule;
const formValidationRule: ValidationRule;

Alternatively, define a union:

type ValidationRule = DxDataGridTypes.ValidationRule | DxFormTypes.ValidationRule;
const validationRule: ValidationRule;
React
// In the sample below, ToolbarItemLocation is imported for each component:

import { DataGrid, DataGridTypes } from 'devextreme-react/data-grid';
import { Popup, PopupTypes } from 'devextreme-react/popup';

const toolbarItemsLocation: DataGridTypes.ToolbarItemLocation = 'center';
// or
const toolbarItemsLocation: PopupTypes.ToolbarItemLocation = 'center';

// In the sample below, ToolbarItemLocation is imported from the common module:

import { ToolbarItemLocation } from 'devextreme-react/common';
const toolbarItemsLocation: ToolbarItemLocation;

Alternatively, define a union:

type ToolbarItemLocation = DataGridTypes.ToolbarItemLocation | PopupTypes.ToolbarItemLocation;
const toolbarItemsLocation: ToolbarItemLocation = 'center';

Internal Types

Internal types support DevExtreme infrastructure and are not a part of the component's API. Avoid using these types in your projects. If you do, they issue the following warning:

Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our Support Center. We will check if there is an alternative solution.

This warning is shown when navigating to the type declaration, in the console during build, or in your IDE (depending on its settings).