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
.
- 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.
- // 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).
If you have technical questions, please create a support ticket in the DevExpress Support Center.