From 32d28ce6e97cf9b264cb1962a17c385c12bb4565 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 10 Jul 2024 14:02:55 +0400 Subject: [PATCH 01/16] React: update TS Support topic --- .../05 Scopes of Types/00 Scopes of Types.md | 0 .../05 Internal vs. Public Types.md | 5 ++ .../10 Component-Specific Types.md} | 23 +++--- .../05 Scopes of Types/15 Common Types.md | 34 +++++++++ .../10 Kinds of Types/00 Kinds of Types.md | 0 .../10 Kinds of Types/05 Event Objects.md | 70 +++++++++++++++++++ .../10 Additional Event Parts.md | 19 +++++ .../10 Kinds of Types/15 Writable Fields.md | 1 + .../20 Generic Parameters.md} | 2 +- .../15 Tips and Tricks/00 Tips and Tricks.md | 0 ...05 Using Unions Instead of Base Classes.md | 3 + 11 files changed, 143 insertions(+), 14 deletions(-) create mode 100644 concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/00 Scopes of Types.md create mode 100644 concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/05 Internal vs. Public Types.md rename concepts/50 React Components/70 TypeScript Support/{05 Component-Specific Types.md => 05 Scopes of Types/10 Component-Specific Types.md} (69%) create mode 100644 concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md create mode 100644 concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/00 Kinds of Types.md create mode 100644 concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md create mode 100644 concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md create mode 100644 concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md rename concepts/50 React Components/70 TypeScript Support/{10 Generics Usage.md => 10 Kinds of Types/20 Generic Parameters.md} (86%) create mode 100644 concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/00 Tips and Tricks.md create mode 100644 concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/05 Using Unions Instead of Base Classes.md diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/00 Scopes of Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/00 Scopes of Types.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/05 Internal vs. Public Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/05 Internal vs. Public Types.md new file mode 100644 index 0000000000..838352754a --- /dev/null +++ b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/05 Internal vs. Public Types.md @@ -0,0 +1,5 @@ +Internal types are for internal implementation only. Avoid using them in your projects. They have a special 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. + +You will see this warning when navigating to the type declaration, in the console during build, or in your IDE, depending on its settings. \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/05 Component-Specific Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md similarity index 69% rename from concepts/50 React Components/70 TypeScript Support/05 Component-Specific Types.md rename to concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md index 1c04f35c75..f7c654ab00 100644 --- a/concepts/50 React Components/70 TypeScript Support/05 Component-Specific Types.md +++ b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md @@ -1,3 +1,7 @@ +These types configure specific components. Each component has its own set. + +**Modular Projects** + To get component-specific types, import the `ComponentTypes` declaration where `Component` is the component name: @@ -10,25 +14,18 @@ To get component-specific types, import the `ComponentTypes` declaration where ` ); } - -If you need the same type for multiple components, you can also import this type from `common` submodule: + export default App; - - // In the sample below, ValidationRule is imported for each component: +After importing, search through all types using `DateBoxTypes.` without extra imports. - import { DataGridTypes } from 'devextreme-react/data-grid'; - import { FormTypes } from 'devextreme-react/form'; +**Non-Modular Projects** - const dataGridValidationRule: DataGridTypes.ValidationRule; - const formValidationRule: FormTypes.ValidationRule; - - // In the sample below, ValidationRule is imported from the common submodule: +Find component types under the corresponding namespace: - import { ValidationRule } from 'devextreme-react/common'; + const dateType: DevExpress.ui.dxDateBox.DateType = 'datetime'; - const dataGridValidationRule: ValidationRule; - const formValidationRule: ValidationRule; +**Templates** [Templates](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/55%20Markup%20Customization/0%20Markup%20Customization.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Markup_Customization') 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`: diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md new file mode 100644 index 0000000000..598feb1c06 --- /dev/null +++ b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md @@ -0,0 +1,34 @@ +**Modular Projects** + +Common types are usually in the `ComponentTypes` namespace. If a common type is missing, file an issue in our [Support Center](https://supportcenter.devexpress.com/ticket/create). + +When using a type for multiple components, it can be unclear from which module to import: + + import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid'; + import Popup, { PopupTypes } from 'devextreme-react/pop-up'; + + const toolbarItemsLocation: DataGridTypes.ToolbarItemLocation = 'center'; + // or + const toolbarItemsLocation: PopupTypes.ToolbarItemLocation = 'center'; + +In such cases, import the type from a common submodule: + + import { ToolbarItemLocation } from 'devextreme-react/common'; + const toolbarItemsLocation: ToolbarItemLocation; + +Alternatively, define a union: + + type ToolbarItemLocation = DataGridTypes.ToolbarItemLocation | PopupTypes.ToolbarItemLocation; + const toolbarItemsLocation: ToolbarItemLocation = 'center'; + +**Non-Modular Projects** + +Common types are located in the following namespaces: + +- DevExpress.common + +- DevExpress.common.charts + +- DevExpress.common.grids + + const toolbarItemsLocation: DevExpress.common.ToolbarItemLocation; \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/00 Kinds of Types.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/00 Kinds of Types.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md new file mode 100644 index 0000000000..be5d43a84c --- /dev/null +++ b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md @@ -0,0 +1,70 @@ +Each component has event types that define arguments for handling events. Naming convention is the following: the argument type of the `contentReady` event handler is `ContentReadyEvent`. + +Event types are based on common parts: + + export type AppointmentClickEvent = Cancelable & NativeEventInfo & TargetedAppointmentInfo & { + readonly appointmentElement: DxElement; + }; + +### Common Event Parts + +Events are union types built from common and specific parts: + + export type AppointmentTooltipShowingEvent = Cancelable & EventInfo & { + readonly targetElement: DxElement; + readonly appointments: AppointmentTooltipShowingAppointmentInfo[]; + }; + + export type CellContextMenuEvent = NativeEventInfo & { + readonly cellData: any; + readonly cellElement: DxElement; + }; + +### EventInfo and NativeEventInfo + +Most event arguments have a core part, either `EventInfo` or `NativeEventInfo`. + +`EventInfo` is for synthetic events and includes the following fields: + +- `component` +Reference to the component API. + +- `element` +Reference to the HTML element. + + export interface EventInfo { + readonly component: TComponent; + readonly element: DxElement; + } + +`NativeEventInfo` is for browser events and includes the following fields: + +- `component` +Reference to the component API. + +- `element` +Reference to the HTML element. + +- `event` +Native browser event with additional fields from `EventObject`. + + interface NativeEventInfo { + readonly component: TComponent; + readonly element: DxElement; + readonly event?: EventObject & TNativeEvent; + } + + interface EventObject { + currentTarget: Element; + data: any; + delegateTarget: Element; + target: Element; + isDefaultPrevented(): boolean; + isImmediatePropagationStopped(): boolean; + isPropagationStopped(): boolean; + preventDefault(): void; + stopImmediatePropagation(): void; + stopPropagation(): void; + } + +These types may include conditional elements for integration with third-party libraries. In React, they resolve to built-in browser types. \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md new file mode 100644 index 0000000000..559e09e6d6 --- /dev/null +++ b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md @@ -0,0 +1,19 @@ +**ItemInfo** + +Events involving collection items include an `ItemInfo` part. + +**ChangedOptionInfo** + +`OptionChanged` event objects include `ChangedOptionInfo`. + +**InitializedEventInfo** + +Events involving initialization use `InitializedEventInfo`. + +**Cancelable** + +If an event argument type includes `Cancelable`, the event can be canceled by setting the `cancel` property: + + const onListDragStart = (e) => { + e.cancel = true; + }; \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md new file mode 100644 index 0000000000..4e8226a464 --- /dev/null +++ b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md @@ -0,0 +1 @@ +Event object fields are mostly prefixed with `readonly`. Fields without this modifier are writable and can affect the component. For example, the `cancel` field in cancelable events is writable. \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/10 Generics Usage.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/20 Generic Parameters.md similarity index 86% rename from concepts/50 React Components/70 TypeScript Support/10 Generics Usage.md rename to concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/20 Generic Parameters.md index 1ac4a1ca5c..d6e334bbe4 100644 --- a/concepts/50 React Components/70 TypeScript Support/10 Generics Usage.md +++ b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/20 Generic Parameters.md @@ -1,4 +1,4 @@ -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: +Some event objects are generic, particularly for data-aware components like Data-Grid: import { useRef } from 'react'; diff --git a/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/00 Tips and Tricks.md b/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/00 Tips and Tricks.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/05 Using Unions Instead of Base Classes.md b/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/05 Using Unions Instead of Base Classes.md new file mode 100644 index 0000000000..9f4792b1be --- /dev/null +++ b/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/05 Using Unions Instead of Base Classes.md @@ -0,0 +1,3 @@ +Inheritance is for internal implementation. Use unions to generalize types: + + type EditorProps = TextAreaTypes.Properties | TextBoxTypes.Properties | AutocompleteTypes.Properties | LookupTypes.Properties; \ No newline at end of file From 251365d9e9bab44106c7a68541a4dd68c8bd9b9c Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 11 Jul 2024 12:38:08 +0400 Subject: [PATCH 02/16] Fix code snippets under lists --- .../05 Scopes of Types/15 Common Types.md | 2 ++ .../10 Kinds of Types/05 Event Objects.md | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md index 598feb1c06..8a3b8e89e4 100644 --- a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md +++ b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md @@ -31,4 +31,6 @@ Common types are located in the following namespaces: - DevExpress.common.grids + + const toolbarItemsLocation: DevExpress.common.ToolbarItemLocation; \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md index be5d43a84c..499ddded07 100644 --- a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md +++ b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md @@ -32,6 +32,8 @@ Reference to the component API. - `element` Reference to the HTML element. + + export interface EventInfo { readonly component: TComponent; readonly element: DxElement; @@ -48,6 +50,8 @@ Reference to the HTML element. - `event` Native browser event with additional fields from `EventObject`. + + interface NativeEventInfo { readonly component: TComponent; readonly element: DxElement; From a6d1fd8fee2687450686e5e389233e211595bf9c Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Wed, 7 Aug 2024 16:03:43 +0400 Subject: [PATCH 03/16] Apply suggestions from code review Co-authored-by: ilya.kharchenko <14272298+IlyaKhD@users.noreply.github.com> --- .../05 Scopes of Types/15 Common Types.md | 6 +++--- .../10 Kinds of Types/05 Event Objects.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md index 8a3b8e89e4..f7b5c750e2 100644 --- a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md +++ b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md @@ -4,14 +4,14 @@ Common types are usually in the `ComponentTypes` namespace. If a common type is When using a type for multiple components, it can be unclear from which module to import: - import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid'; - import Popup, { PopupTypes } from 'devextreme-react/pop-up'; + import { DataGrid, DataGridTypes } from 'devextreme-react/data-grid'; + import { Popup, PopupTypes } from 'devextreme-react/pop-up'; const toolbarItemsLocation: DataGridTypes.ToolbarItemLocation = 'center'; // or const toolbarItemsLocation: PopupTypes.ToolbarItemLocation = 'center'; -In such cases, import the type from a common submodule: +In such cases, import the type from a common module: import { ToolbarItemLocation } from 'devextreme-react/common'; const toolbarItemsLocation: ToolbarItemLocation; diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md index 499ddded07..c377da718f 100644 --- a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md +++ b/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md @@ -8,7 +8,7 @@ Event types are based on common parts: ### Common Event Parts -Events are union types built from common and specific parts: +Events are [intersection types](https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types) built up from common and specific parts: export type AppointmentTooltipShowingEvent = Cancelable & EventInfo & { readonly targetElement: DxElement; From 9abbd72bd482f1bb01d0c058acbfce9356545689 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 14 Aug 2024 12:46:12 +0400 Subject: [PATCH 04/16] move internal types --- .../{05 Internal vs. Public Types.md => 20 Internal Types.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/{05 Internal vs. Public Types.md => 20 Internal Types.md} (100%) diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/05 Internal vs. Public Types.md b/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/20 Internal Types.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/05 Internal vs. Public Types.md rename to concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/20 Internal Types.md From 622f1d3e850a00b8944ebb854c9506285c24bad3 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Tue, 20 Aug 2024 15:48:22 +0400 Subject: [PATCH 05/16] Update structure --- MenuConfig.xml | 7 +-- .../00 TypeScript Support.md | 3 -- .../10 Generics Usage.md | 37 --------------- .../00 TypeScript Support.md | 42 ----------------- .../05 Component Specific Types.md | 31 ------------ .../TypeScript Guides/00 Getting Started.md} | 47 ++++++++++++++++++- .../05 Scopes of Types/00 Scopes of Types.md | 0 .../10 Component-Specific Types.md | 26 ++++++++++ .../05 Scopes of Types/15 Common Types.md | 0 .../05 Scopes of Types/20 Internal Types.md | 0 .../TypeScript Guides/10 Events/00 Events.md} | 0 .../10 Events}/05 Event Objects.md | 0 .../10 EventInfo and NativeEventInfo.md} | 0 .../10 Events/15 Other Event Parts.md} | 0 .../15 Syntax Elements/00 Syntax Elements.md | 0 .../15 Syntax Elements/05 Writable Fields.md} | 0 .../10 Generic Parameters.md} | 0 .../20 Tips and Tricks/00 Tips and Tricks.md | 0 ...05 Using Unions Instead of Base Classes.md | 0 .../20 Tips and Tricks/10 Using Templates.md} | 29 ------------ .../50 other/50 Component Specific Types.md} | 34 +++++++++++++- .../50 other/55 Access a UI Component.md} | 0 .../50 other/60 Generics Usage.md} | 38 +++++++++++++++ .../50 other/65 Configure a UI Component.md} | 0 .../70 Reference TypeScript Definitions.md} | 0 25 files changed, 145 insertions(+), 149 deletions(-) delete mode 100644 concepts/40 Angular Components/70 TypeScript Support/00 TypeScript Support.md delete mode 100644 concepts/40 Angular Components/70 TypeScript Support/10 Generics Usage.md delete mode 100644 concepts/50 React Components/70 TypeScript Support/00 TypeScript Support.md delete mode 100644 concepts/55 Vue Components/70 TypeScript Support/05 Component Specific Types.md rename concepts/{55 Vue Components/70 TypeScript Support/00 TypeScript Support.md => Common/TypeScript Guides/00 Getting Started.md} (56%) rename concepts/{50 React Components/70 TypeScript Support => Common/TypeScript Guides}/05 Scopes of Types/00 Scopes of Types.md (100%) create mode 100644 concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md rename concepts/{50 React Components/70 TypeScript Support => Common/TypeScript Guides}/05 Scopes of Types/15 Common Types.md (100%) rename concepts/{50 React Components/70 TypeScript Support => Common/TypeScript Guides}/05 Scopes of Types/20 Internal Types.md (100%) rename concepts/{50 React Components/70 TypeScript Support/10 Kinds of Types/00 Kinds of Types.md => Common/TypeScript Guides/10 Events/00 Events.md} (100%) rename concepts/{50 React Components/70 TypeScript Support/10 Kinds of Types => Common/TypeScript Guides/10 Events}/05 Event Objects.md (100%) rename concepts/{50 React Components/70 TypeScript Support/15 Tips and Tricks/00 Tips and Tricks.md => Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md} (100%) rename concepts/{50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md => Common/TypeScript Guides/10 Events/15 Other Event Parts.md} (100%) create mode 100644 concepts/Common/TypeScript Guides/15 Syntax Elements/00 Syntax Elements.md rename concepts/{50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md => Common/TypeScript Guides/15 Syntax Elements/05 Writable Fields.md} (100%) rename concepts/{50 React Components/70 TypeScript Support/10 Kinds of Types/20 Generic Parameters.md => Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md} (100%) create mode 100644 concepts/Common/TypeScript Guides/20 Tips and Tricks/00 Tips and Tricks.md rename concepts/{50 React Components/70 TypeScript Support/15 Tips and Tricks => Common/TypeScript Guides/20 Tips and Tricks}/05 Using Unions Instead of Base Classes.md (100%) rename concepts/{50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md => Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md} (61%) rename concepts/{40 Angular Components/70 TypeScript Support/05 Component Specific Types.md => Common/TypeScript Guides/50 other/50 Component Specific Types.md} (60%) rename concepts/Common/{TypeScript Support/10 Access a UI Component.md => TypeScript Guides/50 other/55 Access a UI Component.md} (100%) rename concepts/{55 Vue Components/70 TypeScript Support/10 Generics Usage.md => Common/TypeScript Guides/50 other/60 Generics Usage.md} (51%) rename concepts/Common/{TypeScript Support/05 Configure a UI Component.md => TypeScript Guides/50 other/65 Configure a UI Component.md} (100%) rename concepts/Common/{TypeScript Support/01 Reference TypeScript Definitions.md => TypeScript Guides/50 other/70 Reference TypeScript Definitions.md} (100%) diff --git a/MenuConfig.xml b/MenuConfig.xml index abc6432308..f60eac4352 100644 --- a/MenuConfig.xml +++ b/MenuConfig.xml @@ -38,11 +38,6 @@ - - - - - @@ -55,6 +50,8 @@ + + diff --git a/concepts/40 Angular Components/70 TypeScript Support/00 TypeScript Support.md b/concepts/40 Angular Components/70 TypeScript Support/00 TypeScript Support.md deleted file mode 100644 index 3dffc99865..0000000000 --- a/concepts/40 Angular Components/70 TypeScript Support/00 TypeScript Support.md +++ /dev/null @@ -1,3 +0,0 @@ -TypeScript is a [primary language](https://angular.io/guide/typescript-configuration) for Angular development. This help topic outlines additional TypeScript specifics related to development with DevExtreme components. - -[tags] angular \ No newline at end of file diff --git a/concepts/40 Angular Components/70 TypeScript Support/10 Generics Usage.md b/concepts/40 Angular Components/70 TypeScript Support/10 Generics Usage.md deleted file mode 100644 index b55cb0275b..0000000000 --- a/concepts/40 Angular Components/70 TypeScript Support/10 Generics Usage.md +++ /dev/null @@ -1,37 +0,0 @@ -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 { Component, ViewChild } from '@angular/core'; - import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; - import { Employee } from './data'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - - export class AppComponent { - @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent; - - onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent) { - if (e.dataField === 'LastName' && e.parentType === 'dataRow') { - e.editorOptions.disabled = e.row?.data && e.row?.data.FirstName === ''; - } - } - - onButtonClick() { - const keys: number[] = this.dataGrid.instance.getSelectedRowKeys(); - } - } - - - - - - \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/00 TypeScript Support.md b/concepts/50 React Components/70 TypeScript Support/00 TypeScript Support.md deleted file mode 100644 index 3862c59d65..0000000000 --- a/concepts/50 React Components/70 TypeScript Support/00 TypeScript Support.md +++ /dev/null @@ -1,42 +0,0 @@ -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 = (props) => { - const [counter, setCounter] = useState(0); - - const addCounter = () => { - setCounter(counter + 1); - }; - - return ( -
- {props.text} was clicked {counter} times -
- ); - }; - - const App: React.FC = () => { - return ( - } /> - ); - }; - - export default App; - -[tags] react \ No newline at end of file diff --git a/concepts/55 Vue Components/70 TypeScript Support/05 Component Specific Types.md b/concepts/55 Vue Components/70 TypeScript Support/05 Component Specific Types.md deleted file mode 100644 index c0ea983c81..0000000000 --- a/concepts/55 Vue Components/70 TypeScript Support/05 Component Specific Types.md +++ /dev/null @@ -1,31 +0,0 @@ -To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: - - - - - - -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 { 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 submodule: - - import { ValidationRule } from 'devextreme-vue/common'; - - const dataGridValidationRule: ValidationRule; - const formValidationRule: ValidationRule; \ No newline at end of file diff --git a/concepts/55 Vue Components/70 TypeScript Support/00 TypeScript Support.md b/concepts/Common/TypeScript Guides/00 Getting Started.md similarity index 56% rename from concepts/55 Vue Components/70 TypeScript Support/00 TypeScript Support.md rename to concepts/Common/TypeScript Guides/00 Getting Started.md index 8d21c492bc..7f0ac955b2 100644 --- a/concepts/55 Vue Components/70 TypeScript Support/00 TypeScript Support.md +++ b/concepts/Common/TypeScript Guides/00 Getting Started.md @@ -65,4 +65,49 @@ The following code shows an example of using TypeScript with DevExtreme componen #####See Also##### - TypeScript Support in Vue Documentation -[tags] vue \ No newline at end of file +[tags] vue + +TypeScript is a [primary language](https://angular.io/guide/typescript-configuration) for Angular development. This help topic outlines additional TypeScript specifics related to development with DevExtreme components. + +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 = (props) => { + const [counter, setCounter] = useState(0); + + const addCounter = () => { + setCounter(counter + 1); + }; + + return ( +
+ {props.text} was clicked {counter} times +
+ ); + }; + + const App: React.FC = () => { + return ( + } /> + ); + }; + + export default App; + +[tags] react \ No newline at end of file diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/00 Scopes of Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/00 Scopes of Types.md rename to concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md new file mode 100644 index 0000000000..9ce99c1149 --- /dev/null +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md @@ -0,0 +1,26 @@ +These types configure specific components. Each component has its own set. + +**Modular Projects** + +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 ( + + ); + } + + export default App; + +After importing, search through all types using `DateBoxTypes.` without extra imports. + +**Non-Modular Projects** + +Find component types under the corresponding namespace: + + const dateType: DevExpress.ui.dxDateBox.DateType = 'datetime'; diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/15 Common Types.md rename to concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/20 Internal Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/20 Internal Types.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/20 Internal Types.md rename to concepts/Common/TypeScript Guides/05 Scopes of Types/20 Internal Types.md diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/00 Kinds of Types.md b/concepts/Common/TypeScript Guides/10 Events/00 Events.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/00 Kinds of Types.md rename to concepts/Common/TypeScript Guides/10 Events/00 Events.md diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md b/concepts/Common/TypeScript Guides/10 Events/05 Event Objects.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/05 Event Objects.md rename to concepts/Common/TypeScript Guides/10 Events/05 Event Objects.md diff --git a/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/00 Tips and Tricks.md b/concepts/Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/00 Tips and Tricks.md rename to concepts/Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md b/concepts/Common/TypeScript Guides/10 Events/15 Other Event Parts.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/10 Additional Event Parts.md rename to concepts/Common/TypeScript Guides/10 Events/15 Other Event Parts.md diff --git a/concepts/Common/TypeScript Guides/15 Syntax Elements/00 Syntax Elements.md b/concepts/Common/TypeScript Guides/15 Syntax Elements/00 Syntax Elements.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md b/concepts/Common/TypeScript Guides/15 Syntax Elements/05 Writable Fields.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/15 Writable Fields.md rename to concepts/Common/TypeScript Guides/15 Syntax Elements/05 Writable Fields.md diff --git a/concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/20 Generic Parameters.md b/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/10 Kinds of Types/20 Generic Parameters.md rename to concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md diff --git a/concepts/Common/TypeScript Guides/20 Tips and Tricks/00 Tips and Tricks.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/00 Tips and Tricks.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/05 Using Unions Instead of Base Classes.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/05 Using Unions Instead of Base Classes.md similarity index 100% rename from concepts/50 React Components/70 TypeScript Support/15 Tips and Tricks/05 Using Unions Instead of Base Classes.md rename to concepts/Common/TypeScript Guides/20 Tips and Tricks/05 Using Unions Instead of Base Classes.md diff --git a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md similarity index 61% rename from concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md rename to concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md index f7c654ab00..ae3bbdd005 100644 --- a/concepts/50 React Components/70 TypeScript Support/05 Scopes of Types/10 Component-Specific Types.md +++ b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md @@ -1,32 +1,3 @@ -These types configure specific components. Each component has its own set. - -**Modular Projects** - -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 ( - - ); - } - - export default App; - -After importing, search through all types using `DateBoxTypes.` without extra imports. - -**Non-Modular Projects** - -Find component types under the corresponding namespace: - - const dateType: DevExpress.ui.dxDateBox.DateType = 'datetime'; - -**Templates** - [Templates](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/55%20Markup%20Customization/0%20Markup%20Customization.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Markup_Customization') 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`: diff --git a/concepts/40 Angular Components/70 TypeScript Support/05 Component Specific Types.md b/concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md similarity index 60% rename from concepts/40 Angular Components/70 TypeScript Support/05 Component Specific Types.md rename to concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md index a95357c6ef..44a9707f4d 100644 --- a/concepts/40 Angular Components/70 TypeScript Support/05 Component Specific Types.md +++ b/concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md @@ -54,4 +54,36 @@ If you need the same type for multiple components, you can import that type from export class AppComponent { dataGridValidationRule: ValidationRule; formValidationRule: ValidationRule; - } \ No newline at end of file + } + +To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: + + + + + + +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 { 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 submodule: + + import { ValidationRule } from 'devextreme-vue/common'; + + const dataGridValidationRule: ValidationRule; + const formValidationRule: ValidationRule; \ No newline at end of file diff --git a/concepts/Common/TypeScript Support/10 Access a UI Component.md b/concepts/Common/TypeScript Guides/50 other/55 Access a UI Component.md similarity index 100% rename from concepts/Common/TypeScript Support/10 Access a UI Component.md rename to concepts/Common/TypeScript Guides/50 other/55 Access a UI Component.md diff --git a/concepts/55 Vue Components/70 TypeScript Support/10 Generics Usage.md b/concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md similarity index 51% rename from concepts/55 Vue Components/70 TypeScript Support/10 Generics Usage.md rename to concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md index 5ea31704d3..16302d79c2 100644 --- a/concepts/55 Vue Components/70 TypeScript Support/10 Generics Usage.md +++ b/concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md @@ -1,3 +1,41 @@ +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 { Component, ViewChild } from '@angular/core'; + import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; + import { Employee } from './data'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + + export class AppComponent { + @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent; + + onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent) { + if (e.dataField === 'LastName' && e.parentType === 'dataRow') { + e.editorOptions.disabled = e.row?.data && e.row?.data.FirstName === ''; + } + } + + onButtonClick() { + const keys: number[] = this.dataGrid.instance.getSelectedRowKeys(); + } + } + + + + + + + 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: diff --git a/concepts/Common/TypeScript Support/05 Configure a UI Component.md b/concepts/Common/TypeScript Guides/50 other/65 Configure a UI Component.md similarity index 100% rename from concepts/Common/TypeScript Support/05 Configure a UI Component.md rename to concepts/Common/TypeScript Guides/50 other/65 Configure a UI Component.md diff --git a/concepts/Common/TypeScript Support/01 Reference TypeScript Definitions.md b/concepts/Common/TypeScript Guides/50 other/70 Reference TypeScript Definitions.md similarity index 100% rename from concepts/Common/TypeScript Support/01 Reference TypeScript Definitions.md rename to concepts/Common/TypeScript Guides/50 other/70 Reference TypeScript Definitions.md From 5daa909c76542153bb449453dff553919675b499 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Tue, 20 Aug 2024 17:34:36 +0400 Subject: [PATCH 06/16] Update Getting Started section --- .../TypeScript Guides/00 Getting Started.md | 121 ++---------------- .../70 Reference TypeScript Definitions.md | 15 --- 2 files changed, 14 insertions(+), 122 deletions(-) delete mode 100644 concepts/Common/TypeScript Guides/50 other/70 Reference TypeScript Definitions.md diff --git a/concepts/Common/TypeScript Guides/00 Getting Started.md b/concepts/Common/TypeScript Guides/00 Getting Started.md index 7f0ac955b2..3cfc57a7a6 100644 --- a/concepts/Common/TypeScript Guides/00 Getting Started.md +++ b/concepts/Common/TypeScript Guides/00 Getting Started.md @@ -1,113 +1,20 @@ -DevExtreme Vue 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. +--- +##### jQuery +You can find the TypeScript definition file for DevExtreme in the [DevExtreme zip archive](/Documentation/Guide/Common/Distribution_Channels/#ZIP_Archive) or in the installation folder: **C:\Program Files\DevExpress 24.1\DevExtreme\Sources\Lib\ts**. Add this file to your project. Next, reference this file and the jQuery TypeScript definition file in your *.ts* file. -The following code shows an example of using TypeScript with DevExtreme components in a Vue application: + + // File from the zip archive or from the installation folder: + - - +Along with TypeScript definitions, you need to reference the libraries themselves. Refer to the following help topic for detailed information: [Local Files](/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/#Local_Files). - +##### Vue +DevExtreme Vue components are supplied with [TypeScript](https://v3.vuejs.org/guide/typescript-support.html) declarations. Strict typing allows you to catch bugs at earlier stages and use features like code completion and automated refactoring. - - - - - -#####See Also##### -- TypeScript Support in Vue Documentation - -[tags] vue - -TypeScript is a [primary language](https://angular.io/guide/typescript-configuration) for Angular development. This help topic outlines additional TypeScript specifics related to development with DevExtreme components. - -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 = (props) => { - const [counter, setCounter] = useState(0); - - const addCounter = () => { - setCounter(counter + 1); - }; - - return ( -
- {props.text} was clicked {counter} times -
- ); - }; - - const App: React.FC = () => { - return ( - } /> - ); - }; - - export default App; - -[tags] react \ No newline at end of file +--- \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/50 other/70 Reference TypeScript Definitions.md b/concepts/Common/TypeScript Guides/50 other/70 Reference TypeScript Definitions.md deleted file mode 100644 index 87261277f9..0000000000 --- a/concepts/Common/TypeScript Guides/50 other/70 Reference TypeScript Definitions.md +++ /dev/null @@ -1,15 +0,0 @@ -You can find the file with TypeScript definitions for DevExtreme in the DevExtreme zip archive or in the folder where you have installed DevExtreme, which is **C:\Program Files\DevExpress 24.1\DevExtreme\Sources\Lib\ts** by default. Add this file to your project. Then, reference this and jQuery TypeScript definition file in your *.ts*-file. - - /// - // File from the zip archive or from the installation folder... - /// - // ...or file from GitHub - /// - -Along with TypeScript definitions, you need to reference the libraries themselves. See [Local Files](/concepts/58%20jQuery%20Components/05%20Add%20DevExtreme%20to%20a%20jQuery%20Application/10%20Local%20Files.md '/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/#Local_Files') for detailed information. - - -#####See Also##### -- [Configure a UI component Using TypeScript](/concepts/Common/TypeScript%20Support/05%20Configure%20a%20UI%20Component.md '/Documentation/Guide/Common/TypeScript_Support/Configure_a_UI_Component/') - -[tags] jquery From d165d03544759274ea6eb9a348c03c64faaa2534 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 21 Aug 2024 12:19:46 +0400 Subject: [PATCH 07/16] Update types sections --- .../10 Component-Specific Types.md | 59 ++++++++++-- .../05 Scopes of Types/15 Common Types.md | 89 ++++++++++++++++--- .../50 other/50 Component Specific Types.md | 89 ------------------- 3 files changed, 128 insertions(+), 109 deletions(-) delete mode 100644 concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md index 9ce99c1149..8523941bf9 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md @@ -1,6 +1,57 @@ These types configure specific components. Each component has its own set. -**Modular Projects** +--- +##### jQuery + +Find component types under the corresponding namespace: + + const dateType: DevExpress.ui.dxDateBox.DateType = 'datetime'; + +##### Angular + +To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: + + + import { Component } from '@angular/core'; + import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + + export class AppComponent { + dateType: DxDateBoxTypes.DateType = "datetime"; + } + + + + + +After importing, search through all types using `DxDateBoxTypes.` without extra imports. + +##### Vue + +To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: + + + + + + +After importing, search through all types using `DxDateBoxTypes.` without extra imports. + +##### React To get component-specific types, import the `ComponentTypes` declaration where `Component` is the component name: @@ -19,8 +70,4 @@ To get component-specific types, import the `ComponentTypes` declaration where ` After importing, search through all types using `DateBoxTypes.` without extra imports. -**Non-Modular Projects** - -Find component types under the corresponding namespace: - - const dateType: DevExpress.ui.dxDateBox.DateType = 'datetime'; +--- \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md index f7b5c750e2..00440e144c 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md @@ -1,4 +1,77 @@ -**Modular Projects** +--- +##### jQuery + +Common types are located in the following namespaces: + +- DevExpress.common + +- DevExpress.common.charts + +- DevExpress.common.grids + + + + const toolbarItemsLocation: DevExpress.common.ToolbarItemLocation; + +##### Angular + +If you need the same type for multiple components, you can import that type from the `common` submodule: + + + // 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 submodule: + + 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; + } + +##### Vue + +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 { 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 submodule: + + import { ValidationRule } from 'devextreme-vue/common'; + + const dataGridValidationRule: ValidationRule; + const formValidationRule: ValidationRule; + +##### React Common types are usually in the `ComponentTypes` namespace. If a common type is missing, file an issue in our [Support Center](https://supportcenter.devexpress.com/ticket/create). @@ -21,16 +94,4 @@ Alternatively, define a union: type ToolbarItemLocation = DataGridTypes.ToolbarItemLocation | PopupTypes.ToolbarItemLocation; const toolbarItemsLocation: ToolbarItemLocation = 'center'; -**Non-Modular Projects** - -Common types are located in the following namespaces: - -- DevExpress.common - -- DevExpress.common.charts - -- DevExpress.common.grids - - - - const toolbarItemsLocation: DevExpress.common.ToolbarItemLocation; \ No newline at end of file +--- \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md b/concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md deleted file mode 100644 index 44a9707f4d..0000000000 --- a/concepts/Common/TypeScript Guides/50 other/50 Component Specific Types.md +++ /dev/null @@ -1,89 +0,0 @@ -To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: - - - import { Component } from '@angular/core'; - import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - - export class AppComponent { - dateType: DxDateBoxTypes.DateType = "datetime"; - } - - - - - -If you need the same type for multiple components, you can import that type from the `common` submodule: - - - // 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 submodule: - - 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; - } - -To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: - - - - - - -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 { 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 submodule: - - import { ValidationRule } from 'devextreme-vue/common'; - - const dataGridValidationRule: ValidationRule; - const formValidationRule: ValidationRule; \ No newline at end of file From cce8bc38b4b5d5d2fc9c55930f09bef4507554ac Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 21 Aug 2024 14:43:17 +0400 Subject: [PATCH 08/16] Update Generics --- .../10 Events/05 Event Objects.md | 55 +----------- .../10 EventInfo and NativeEventInfo.md | 51 +++++++++++ .../10 Generic Parameters.md | 88 ++++++++++++++++++- .../50 other/60 Generics Usage.md | 78 ---------------- 4 files changed, 139 insertions(+), 133 deletions(-) delete mode 100644 concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md diff --git a/concepts/Common/TypeScript Guides/10 Events/05 Event Objects.md b/concepts/Common/TypeScript Guides/10 Events/05 Event Objects.md index c377da718f..79064c8492 100644 --- a/concepts/Common/TypeScript Guides/10 Events/05 Event Objects.md +++ b/concepts/Common/TypeScript Guides/10 Events/05 Event Objects.md @@ -18,57 +18,4 @@ Events are [intersection types](https://www.typescriptlang.org/docs/handbook/2/o export type CellContextMenuEvent = NativeEventInfo & { readonly cellData: any; readonly cellElement: DxElement; - }; - -### EventInfo and NativeEventInfo - -Most event arguments have a core part, either `EventInfo` or `NativeEventInfo`. - -`EventInfo` is for synthetic events and includes the following fields: - -- `component` -Reference to the component API. - -- `element` -Reference to the HTML element. - - - - export interface EventInfo { - readonly component: TComponent; - readonly element: DxElement; - } - -`NativeEventInfo` is for browser events and includes the following fields: - -- `component` -Reference to the component API. - -- `element` -Reference to the HTML element. - -- `event` -Native browser event with additional fields from `EventObject`. - - - - interface NativeEventInfo { - readonly component: TComponent; - readonly element: DxElement; - readonly event?: EventObject & TNativeEvent; - } - - interface EventObject { - currentTarget: Element; - data: any; - delegateTarget: Element; - target: Element; - isDefaultPrevented(): boolean; - isImmediatePropagationStopped(): boolean; - isPropagationStopped(): boolean; - preventDefault(): void; - stopImmediatePropagation(): void; - stopPropagation(): void; - } - -These types may include conditional elements for integration with third-party libraries. In React, they resolve to built-in browser types. \ No newline at end of file + }; \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md b/concepts/Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md index e69de29bb2..ef022c36e3 100644 --- a/concepts/Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md +++ b/concepts/Common/TypeScript Guides/10 Events/10 EventInfo and NativeEventInfo.md @@ -0,0 +1,51 @@ + +Most event arguments have a core part, either `EventInfo` or `NativeEventInfo`. + +`EventInfo` is for synthetic events and includes the following fields: + +- `component` +Reference to the component API. + +- `element` +Reference to the HTML element. + + + + export interface EventInfo { + readonly component: TComponent; + readonly element: DxElement; + } + +`NativeEventInfo` is for browser events and includes the following fields: + +- `component` +Reference to the component API. + +- `element` +Reference to the HTML element. + +- `event` +Native browser event with additional fields from `EventObject`. + + + + interface NativeEventInfo { + readonly component: TComponent; + readonly element: DxElement; + readonly event?: EventObject & TNativeEvent; + } + + interface EventObject { + currentTarget: Element; + data: any; + delegateTarget: Element; + target: Element; + isDefaultPrevented(): boolean; + isImmediatePropagationStopped(): boolean; + isPropagationStopped(): boolean; + preventDefault(): void; + stopImmediatePropagation(): void; + stopPropagation(): void; + } + +These types may include conditional elements for integration with third-party libraries. In React, they resolve to built-in browser types. \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md b/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md index d6e334bbe4..80063ac6e3 100644 --- a/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md +++ b/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md @@ -1,5 +1,89 @@ Some event objects are generic, particularly for data-aware components like Data-Grid: +--- +##### jQuery + +##### Angular + + + import { Component, ViewChild } from '@angular/core'; + import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; + import { Employee } from './data'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + + export class AppComponent { + @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent; + + onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent) { + if (e.dataField === 'LastName' && e.parentType === 'dataRow') { + e.editorOptions.disabled = e.row?.data && e.row?.data.FirstName === ''; + } + } + + onButtonClick() { + const keys: number[] = this.dataGrid.instance.getSelectedRowKeys(); + } + } + + + + + + + +##### Vue + + + + + +##### React + import { useRef } from 'react'; import { Employee, employees as dataSource } from './data'; @@ -35,4 +119,6 @@ Some event objects are generic, particularly for data-aware components like Data ); } - export default App; \ No newline at end of file + export default App; + +--- \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md b/concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md deleted file mode 100644 index 16302d79c2..0000000000 --- a/concepts/Common/TypeScript Guides/50 other/60 Generics Usage.md +++ /dev/null @@ -1,78 +0,0 @@ -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 { Component, ViewChild } from '@angular/core'; - import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid'; - import { Employee } from './data'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - - export class AppComponent { - @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent; - - onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent) { - if (e.dataField === 'LastName' && e.parentType === 'dataRow') { - e.editorOptions.disabled = e.row?.data && e.row?.data.FirstName === ''; - } - } - - onButtonClick() { - const keys: number[] = this.dataGrid.instance.getSelectedRowKeys(); - } - } - - - - - - - -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: - - - - From 9ee271f2741f12065c47d602cb57ca71105b5d88 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 21 Aug 2024 15:34:01 +0400 Subject: [PATCH 09/16] Remove outdated topics --- .../20 Tips and Tricks/10 Using Templates.md | 11 ++++-- .../50 other/55 Access a UI Component.md | 8 ----- .../50 other/65 Configure a UI Component.md | 34 ------------------- 3 files changed, 9 insertions(+), 44 deletions(-) delete mode 100644 concepts/Common/TypeScript Guides/50 other/55 Access a UI Component.md delete mode 100644 concepts/Common/TypeScript Guides/50 other/65 Configure a UI Component.md diff --git a/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md index ae3bbdd005..b098c7c01d 100644 --- a/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md +++ b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md @@ -1,4 +1,9 @@ -[Templates](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/55%20Markup%20Customization/0%20Markup%20Customization.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Markup_Customization') 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`: +[Templates](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/55%20Markup%20Customization/0%20Markup%20Customization.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Markup_Customization') can include complex template data as an argument. + +--- +##### React + +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'; @@ -24,4 +29,6 @@ ); - } \ No newline at end of file + } + +--- \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/50 other/55 Access a UI Component.md b/concepts/Common/TypeScript Guides/50 other/55 Access a UI Component.md deleted file mode 100644 index ec50ddf727..0000000000 --- a/concepts/Common/TypeScript Guides/50 other/55 Access a UI Component.md +++ /dev/null @@ -1,8 +0,0 @@ -To access a UI component, you need to obtain its instance first. Note that the variable that will contain the UI component instance should have a `DevExpress.viz.WidgetName` or `DevExpress.ui.WidgetName` type. For example, see how you can obtain the instance of a Chart UI component. - - var chartInstance: DevExpress.viz.dxChart; - chartInstance = $('#chartContainer').dxChart('instance'); - -Now that you have the UI component instance, use jQuery to [get and set UI component options](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/05%20Get%20and%20Set%20Properties/00%20Get%20and%20Set%20Properties.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties'), [call methods](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/10%20Call%20Methods.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods') or [handle events](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/15%20Handle%20Events/00%20Handle%20Events.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Handle_Events'). - -[tags] jquery \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/50 other/65 Configure a UI Component.md b/concepts/Common/TypeScript Guides/50 other/65 Configure a UI Component.md deleted file mode 100644 index eee5d6b1ee..0000000000 --- a/concepts/Common/TypeScript Guides/50 other/65 Configure a UI Component.md +++ /dev/null @@ -1,34 +0,0 @@ -The following code example shows how to declare a UI component configuration object using TypeScript. - - window.onload = () => { - var properties: DevExpress.viz.charts.dxChartOptions; - options = { - dataSource: [ - { fruit: 'Oranges', total: 10 }, - { fruit: 'Apples', total: 15 }, - { fruit: 'Bananas', total: 9 } - ], - series: { argumentField: 'fruit', valueField: 'total' } - }; - }; - -Any configuration object should have a specific type. In this example, the `options` object has the `dxChartOptions` type, which configures the Chart UI component. Type names are formed by concatenating the UI component name (in this example, `dxChart`) and `Options`. - -The part that preceeds the type is its namespace. DevExtreme UI components are declared in the following namespaces. - -- `DevExpress.viz.charts` - [dxChart](/api-reference/10%20UI%20Components/dxChart '/Documentation/ApiReference/UI_Components/dxChart/'), [dxPieChart](/api-reference/10%20UI%20Components/dxPieChart '/Documentation/ApiReference/UI_Components/dxPieChart/') and [dxPolarChart](/api-reference/10%20UI%20Components/dxPolarChart '/Documentation/ApiReference/UI_Components/dxPolarChart/') -- `DevExpress.viz.treeMap` - [dxTreeMap](/api-reference/10%20UI%20Components/dxTreeMap '/Documentation/ApiReference/UI_Components/dxTreeMap/') -- `DevExpress.viz.gauges` - [dxCircularGauge](/api-reference/10%20UI%20Components/dxCircularGauge '/Documentation/ApiReference/UI_Components/dxCircularGauge/'), [dxLinearGauge](/api-reference/10%20UI%20Components/dxLinearGauge '/Documentation/ApiReference/UI_Components/dxLinearGauge/') and [dxBarGauge](/api-reference/10%20UI%20Components/dxBarGauge '/Documentation/ApiReference/UI_Components/dxBarGauge/') -- `DevExpress.viz.rangeSelector` - [dxRangeSelector](/api-reference/10%20UI%20Components/dxRangeSelector '/Documentation/ApiReference/UI_Components/dxRangeSelector/') -- `DevExpress.viz.sparklines` - [dxSparkline](/api-reference/10%20UI%20Components/dxSparkline '/Documentation/ApiReference/UI_Components/dxSparkline/') and [dxBullet](/api-reference/10%20UI%20Components/dxBullet '/Documentation/ApiReference/UI_Components/dxBullet/') -- `DevExpress.viz.map` - [dxVectorMap](/api-reference/10%20UI%20Components/dxVectorMap '/Documentation/ApiReference/UI_Components/dxVectorMap/') -- `DevExpress.ui` - [all other UI components](/api-reference/10%20UI%20Components '/Documentation/ApiReference/UI_Components/') - -After you have declared a configuration object, pass it to the [jQuery plugin](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/01%20Create%20and%20Configure%20a%20Component.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Create_and_Configure_a_Component'). - - $("#chartContainer").dxChart(options); - -#####See Also##### -- **API Reference**.**WidgetName**.**Configuration**, for example, **API Reference**.[Chart](/api-reference/10%20UI%20Components/dxChart '/Documentation/ApiReference/UI_Components/dxChart').[Configuration](/api-reference/10%20UI%20Components/dxChart/1%20Configuration '/Documentation/ApiReference/UI_Components/dxChart/Configuration/') - -[tags] jquery \ No newline at end of file From 794c262fc3fabfe09330c6ee2acbf6af6138b5d2 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 21 Aug 2024 15:38:06 +0400 Subject: [PATCH 10/16] Replace links --- concepts/50 React Components/00 DevExtreme React Components.md | 2 +- concepts/55 Vue Components/00 DevExtreme Vue Components.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/50 React Components/00 DevExtreme React Components.md b/concepts/50 React Components/00 DevExtreme React Components.md index a97d202835..0ee25e4eff 100644 --- a/concepts/50 React Components/00 DevExtreme React Components.md +++ b/concepts/50 React Components/00 DevExtreme React Components.md @@ -18,7 +18,7 @@ The DevExtreme React UI Component Suite provides the following platform-specific - [Declarative configuration syntax](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/00%20Component%20Configuration%20Syntax.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/') -- [TypeScript support](/concepts/50%20React%20Components/70%20TypeScript%20Support/00%20TypeScript%20Support.md '/Documentation/Guide/React_Components/TypeScript_Support/') +- [TypeScript support](/Documentation/Guide/Common/TypeScript_Guides/Getting_Started/) All DevExtreme UI component suites, including React, share architecture and core features. The following core features are common to all suites: diff --git a/concepts/55 Vue Components/00 DevExtreme Vue Components.md b/concepts/55 Vue Components/00 DevExtreme Vue Components.md index 8bf9ec09e7..8e78a8b8ba 100644 --- a/concepts/55 Vue Components/00 DevExtreme Vue Components.md +++ b/concepts/55 Vue Components/00 DevExtreme Vue Components.md @@ -11,7 +11,7 @@ The DevExtreme Vue UI Component Suite provides the following platform-specific f - [Declarative configuration syntax](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/') -- [TypeScript support](/concepts/55%20Vue%20Components/70%20TypeScript%20Support/00%20TypeScript%20Support.md '/Documentation/Guide/Vue_Components/TypeScript_Support/') +- [TypeScript support](/Documentation/Guide/Common/TypeScript_Guides/Getting_Started/) All DevExtreme UI component suites, including Vue, share architecture and core features. The following core features are common to all suites: From 8e5938093390256673a47ee125919efa77dc00ea Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Wed, 21 Aug 2024 17:33:00 +0400 Subject: [PATCH 11/16] Mainly consistency changes --- .../Common/TypeScript Guides/00 Getting Started.md | 13 +------------ .../05 Scopes of Types/00 Scopes of Types.md | 1 + .../10 Component-Specific Types.md | 2 +- .../05 Scopes of Types/15 Common Types.md | 10 +++++----- .../Common/TypeScript Guides/10 Events/00 Events.md | 1 + .../20 Tips and Tricks/00 Tips and Tricks.md | 0 .../20 Tips and Tricks/10 Using Templates.md | 5 +---- 7 files changed, 10 insertions(+), 22 deletions(-) delete mode 100644 concepts/Common/TypeScript Guides/20 Tips and Tricks/00 Tips and Tricks.md diff --git a/concepts/Common/TypeScript Guides/00 Getting Started.md b/concepts/Common/TypeScript Guides/00 Getting Started.md index 3cfc57a7a6..7d135d15a3 100644 --- a/concepts/Common/TypeScript Guides/00 Getting Started.md +++ b/concepts/Common/TypeScript Guides/00 Getting Started.md @@ -1,5 +1,3 @@ ---- -##### jQuery You can find the TypeScript definition file for DevExtreme in the [DevExtreme zip archive](/Documentation/Guide/Common/Distribution_Channels/#ZIP_Archive) or in the installation folder: **C:\Program Files\DevExpress 24.1\DevExtreme\Sources\Lib\ts**. Add this file to your project. Next, reference this file and the jQuery TypeScript definition file in your *.ts* file. @@ -8,13 +6,4 @@ You can find the TypeScript definition file for DevExtreme in the [DevExtreme zi Along with TypeScript definitions, you need to reference the libraries themselves. Refer to the following help topic for detailed information: [Local Files](/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/#Local_Files). -##### Angular -TypeScript is a [primary language](https://angular.io/guide/typescript-configuration) for Angular development. This section outlines additional TypeScript specifics related to development with DevExtreme components. - -##### Vue -DevExtreme Vue components are supplied with [TypeScript](https://v3.vuejs.org/guide/typescript-support.html) declarations. Strict typing allows you to catch bugs at earlier stages and use features like code completion and automated refactoring. - -##### React -DevExtreme React components are supplied with [TypeScript](https://react.dev/learn/typescript) declarations. Strict typing allows you to catch bugs at earlier stages and use features like code completion and automated refactoring. - ---- \ No newline at end of file +[tags] jquery \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md index e69de29bb2..af9a3ba00f 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md @@ -0,0 +1 @@ +If you work with TypeScript, the correct use of types is essential to create an application. Types may belong to one component, be common across several components, or be part of the framework or library. \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md index 8523941bf9..aba71c2e51 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md @@ -1,4 +1,4 @@ -These types configure specific components. Each component has its own set. +Each DevExtreme component has its own set of types. --- ##### jQuery diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md index 00440e144c..d727acce70 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/15 Common Types.md @@ -15,7 +15,7 @@ Common types are located in the following namespaces: ##### Angular -If you need the same type for multiple components, you can import that type from the `common` submodule: +If you need the same type for multiple components, you can import that type from the `common` module: // In the sample below, ValidationRule is imported for each component: @@ -35,7 +35,7 @@ If you need the same type for multiple components, you can import that type from formValidationRule: DxFormTypes.ValidationRule; } - // In the sample below, ValidationRule is imported from the common submodule: + // In the sample below, ValidationRule is imported from the common module: import { Component } from '@angular/core'; import { ValidationRule } from 'devextreme/common'; @@ -53,7 +53,7 @@ If you need the same type for multiple components, you can import that type from ##### Vue -If you need the same type for multiple components, you can also import this type from `common` submodule: +If you need the same type for multiple components, you can also import this type from `common` module: // In the sample below, ValidationRule is imported for each component: @@ -64,7 +64,7 @@ If you need the same type for multiple components, you can also import this type const dataGridValidationRule: DxDataGridTypes.ValidationRule; const formValidationRule: DxFormTypes.ValidationRule; - // In the sample below, ValidationRule is imported from the common submodule: + // In the sample below, ValidationRule is imported from the common module: import { ValidationRule } from 'devextreme-vue/common'; @@ -73,7 +73,7 @@ If you need the same type for multiple components, you can also import this type ##### React -Common types are usually in the `ComponentTypes` namespace. If a common type is missing, file an issue in our [Support Center](https://supportcenter.devexpress.com/ticket/create). +If you need the same type for multiple components, you can import that type from the `common` module. When using a type for multiple components, it can be unclear from which module to import: diff --git a/concepts/Common/TypeScript Guides/10 Events/00 Events.md b/concepts/Common/TypeScript Guides/10 Events/00 Events.md index e69de29bb2..b2ce42ffc6 100644 --- a/concepts/Common/TypeScript Guides/10 Events/00 Events.md +++ b/concepts/Common/TypeScript Guides/10 Events/00 Events.md @@ -0,0 +1 @@ +TypeScript offers tools to handle events with precision and type safety. This section lists the key aspects of handling events in DevExtreme components. \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/20 Tips and Tricks/00 Tips and Tricks.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/00 Tips and Tricks.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md index b098c7c01d..bcd97dcae6 100644 --- a/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md +++ b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md @@ -1,8 +1,5 @@ [Templates](/concepts/50%20React%20Components/40%20Component%20Configuration%20Syntax/55%20Markup%20Customization/0%20Markup%20Customization.md '/Documentation/Guide/React_Components/Component_Configuration_Syntax/#Markup_Customization') can include complex template data as an argument. ---- -##### React - To define types for such templates, import the `ComponentTypes` declaration and find the type that ends with `TemplateData`: @@ -31,4 +28,4 @@ To define types for such templates, import the `ComponentTypes` declaration and ); } ---- \ No newline at end of file +[tags] React \ No newline at end of file From bbc8ffe86b35e1423b057cf909741b14c2ecba02 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Mon, 26 Aug 2024 11:53:23 +0400 Subject: [PATCH 12/16] Minor tags update --- .../15 Syntax Elements/10 Generic Parameters.md | 6 +++--- .../20 Tips and Tricks/10 Using Templates.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md b/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md index 80063ac6e3..92ed6bc16a 100644 --- a/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md +++ b/concepts/Common/TypeScript Guides/15 Syntax Elements/10 Generic Parameters.md @@ -1,8 +1,6 @@ Some event objects are generic, particularly for data-aware components like Data-Grid: --- -##### jQuery - ##### Angular @@ -121,4 +119,6 @@ Some event objects are generic, particularly for data-aware components like Data export default App; ---- \ No newline at end of file +--- + +[tags] angular, react, vue \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md index bcd97dcae6..10a21356c2 100644 --- a/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md +++ b/concepts/Common/TypeScript Guides/20 Tips and Tricks/10 Using Templates.md @@ -28,4 +28,4 @@ To define types for such templates, import the `ComponentTypes` declaration and ); } -[tags] React \ No newline at end of file +[tags] react \ No newline at end of file From 55400a7bd29feef9c2cbddf7fcf0d2794f23e60d Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Tue, 27 Aug 2024 17:13:22 +0400 Subject: [PATCH 13/16] Update Scopes of Types --- .../05 Scopes of Types/00 Scopes of Types.md | 2 +- .../10 Component-Specific Types.md | 47 +++++++++++++++---- .../05 Scopes of Types/15 Common Types.md | 24 ++++++---- .../10 Events/05 Event Objects.md | 2 - 4 files changed, 54 insertions(+), 21 deletions(-) diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md index af9a3ba00f..aaccf07589 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/00 Scopes of Types.md @@ -1 +1 @@ -If you work with TypeScript, the correct use of types is essential to create an application. Types may belong to one component, be common across several components, or be part of the framework or library. \ No newline at end of file +When working with DevExtreme components in TypeScript, the correct use of types is essential for application creation. DevExtreme types may belong to one component, be common across several components, or be internal to the component suite. \ No newline at end of file diff --git a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md index aba71c2e51..126a091bea 100644 --- a/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md +++ b/concepts/Common/TypeScript Guides/05 Scopes of Types/10 Component-Specific Types.md @@ -1,19 +1,30 @@ -Each DevExtreme component has its own set of types. + + + --- ##### jQuery -Find component types under the corresponding namespace: +Each DevExtreme component has its own set of types. To access these types, specify `DevExpress.ui.component` 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 -To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: +Each DevExtreme component has its own set of types. To access these types, import `DxComponentTypes` where `Component` is the component name. + +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](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) 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 bundle it under the alias `DxDateBoxTypes`. + +We then export the `DxDateBoxTypes` alias so you can import these types in your application: import { Component } from '@angular/core'; - import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box'; + import { DxDateBoxTypes } from 'devextreme-angular/date-box'; @Component({ selector: 'app-root', @@ -31,11 +42,20 @@ To get component-specific types, import the `DxComponentTypes` declaration where > -After importing, search through all types using `DxDateBoxTypes.` without extra imports. +After importing, type `DxDateBoxTypes.` to search through all available types. ##### Vue -To get component-specific types, import the `DxComponentTypes` declaration where `Component` is the component name: +Each DevExtreme component has its own set of types. To access these types, import `DxComponentTypes` where `Component` is the component name. + +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](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) 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 bundle it under the alias `DxDateBoxTypes`. + +We then export the `DxDateBoxTypes` alias so you can import these types in your application: