DevExtreme Angular - 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

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.

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.

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;

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).