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

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

獲取DevExtreme v23.2正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

所有框架

現(xiàn)在您可以直接從特定于框架的包中導(dǎo)入所有必需的類型，不再需要從單獨(dú)的`devextreme` 包中導(dǎo)入類型。

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組件中完全支持類型現(xiàn)在是可用的，這將確保您的組件按預(yù)期運(yùn)行，并避免潛在的開發(fā)相關(guān)問題。

Angular

現(xiàn)在支持組件屬性中的文字聯(lián)合類型，IntelliSense為這些特定類型提供了代碼補(bǔ)全功能。

您還可以指定泛型類型參數(shù)來定義數(shù)據(jù)感知組件實(shí)例(例如我們的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演示從類組件轉(zhuǎn)換為功能組件，以更好地使演示與現(xiàn)代React開發(fā)實(shí)踐保持一致。

• 對(duì)于Vue，所有的demo都被轉(zhuǎn)移到TypeScript中。
• 從Options API切換到Composition API。

更多DevExpress線上公開課、中文教程資訊請(qǐng)上中文網(wǎng)獲取