DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

在本文中我們將主要介紹DevExtreme在最近的兩個主要更新(v23.1和v23.2)中引入的TypeScript相關的增強。

獲取DevExtreme v23.2正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

所有框架

現在您可以直接從特定于框架的包中導入所有必需的類型，不再需要從單獨的`devextreme` 包中導入類型。

Before

import { ColumnChooserMode } from 'devextreme/common/grids';
import DataGrid from 'devextreme-react/data-grid';

After

import DataGrid, { DataGridTypes } from 'devextreme-react/data-grid';
const currentMode: DataGridTypes.ColumnChooserMode;

React

在React組件中完全支持類型現在是可用的，這將確保您的組件按預期運行，并避免潛在的開發相關問題。

Angular

現在支持組件屬性中的文字聯合類型，IntelliSense為這些特定類型提供了代碼補全功能。

您還可以指定泛型類型參數來定義數據感知組件實例(例如我們的DataGrid)。

import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } 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<Employee, number>;

onButtonClick() {
const selectedRows: Employee[] = this.dataGrid.instance.getSelectedRowData();
}
}

Demos

• DevExtreme React demos被遷移到TypeScript，您可以在求值期間選擇JavaScript和TypeScript。
• 我們將所有的React演示從類組件轉換為功能組件，以更好地使演示與現代React開發實踐保持一致。

• 對于Vue，所有的demo都被轉移到TypeScript中。
• 從Options API切換到Composition API。

更多DevExpress線上公開課、中文教程資訊請上中文網獲取