DevExtreme Angular - Syntax Elements

Aggregated Export

An aggregated export is a syntactic construction that DevExtreme uses to group several imports into one (for instance, component-specific types).

Angular

Our codebase includes the following lines (for example, in DateBox source code):

import type * as DxDateBoxTypes from "devextreme/ui/date_box_types";
export { DxDateBoxTypes };

Here, import type is used to import only types from a module, not the actual code that runs during runtime. * as DxDateBoxTypes means "import everything" from the module "devextreme/ui/date_box_types" and collect it under the name DxDateBoxTypes.

Vue

Our codebase includes the following lines (for example, in DateBox source code):

import type * as DxDateBoxTypes from "devextreme/ui/date_box_types";
export { DxDateBoxTypes };

Here, import type is used to import only types from a module, not the actual code that runs during runtime. * as DxDateBoxTypes means "import everything" from the module "devextreme/ui/date_box_types" and collect it under the name DxDateBoxTypes.

React

Our codebase includes the following lines (for example, in DateBox source code):

import type * as DateBoxTypes from "devextreme/ui/date_box_types";
export { DateBoxTypes };

Here, import type is used to import only types from a module, not the actual code that runs during runtime. * as DateBoxTypes means "import everything" from the module "devextreme/ui/date_box_types" and collect it under the name DateBoxTypes.

The result is then exported, and this is the aggregated export that you can import in your application for every DevExtreme component.

Conditional Types

When navigating through DevExtreme sources, you can find conditional types like the following:

export type DxEvent<TNativeEvent = Event> = {} extends EventType ? (EventObject & TNativeEvent) : EventType;

export type DxElement<T extends Element = HTMLElement> = {} extends Condition ? T : ElementWrapper<T>;

These conditional types enable integration with third-party libraries. You can ignore them.

jQuery

They resolve to JQuery types: JQuery<HTMLElement> and JQueryEventObject with a cancel field.

Angular

They resolve to built-in browser types: a specific HTMLElement or a browser Event extended with DevExtreme’s EventObject mixin.

Vue

They resolve to built-in browser types: a specific HTMLElement or a browser Event extended with DevExtreme’s EventObject mixin.

React

They resolve to built-in browser types: a specific HTMLElement or a browser Event extended with DevExtreme’s EventObject mixin.