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` 包中導入類型。
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。
