在本文中我們將回顧一下DevExtreme在之前官方發布的重要版本中的一些更改，包括樣式表遷移到SCSS、ES6模塊的引入和TypeScript增強。

DevExtreme v21.2正式版下載

支持SCSS

與純 CSS 相比，大多數前端開發人員更喜歡CSS語言擴展（例如 Less 或 Sass），這些擴展支持變量、可重用樣式、模塊化設計，并允許開發人員像編寫代碼一樣編寫樣式。

DevExtreme從一開始就一直在使用CSS語言擴展，以前我們的樣式表是用Less編寫的，在過去幾年里，Sass（特別是Sass的SCSS語法）在前端社區和主要項目（如Bootstrap和Material）中越來越受歡迎，但Less和Sass樣式表彼此不兼容。簡單地說，Less樣式表不能用于Sass項目，基于使用情況和內部指標，官方研發團隊將DevExtreme樣式表遷移到Sass。

從v20.2開始，devextreme npm包包括SCSS源，您可以根據需要修改SCSS變量和導入來創建自定義主題。由于樣式表是模塊化的，所以您只能編譯在項目中積極使用的那些樣式。

ES6 模塊

在v21.1發布周期中，官方將一組 ES6 模塊添加到npm包中，ES6 模塊允許通過 Tree Shaking 優化，DevExtreme代碼并與現代 JS 封裝器的兼容。

請注意，npm 包還包含舊 CommonJS 版本的 DevExtreme 模塊，以實現向后兼容性。 在大多數情況下，您的捆綁器會自動切換到 ES6 版本。

盡管 ES6 模塊的引入是朝著包大小優化邁出的一大步，但仍有改進的空間。官方即將發布的新版本目標是將模塊進一步拆分為更小、更獨立的部分。

TypeScript增強

同樣在v21.1的主要版本中，官方繼續增強了事件參數類型和分離 jQuery 類型，現在每個事件參數都包含一個可以在代碼中使用的命名類型：

import { AppointmentUpdatingEvent } from 'devextreme/ui/scheduler';

function handleAppointmentUpdating (e: AppointmentUpdatingEvent): void {
// ...
}

這些類型包含有關事件對象的可選和只讀屬性的信息：

type AppointmentUpdatingEvent = EventInfo<dxScheduler> & {
readonly oldData: any;
readonly newData: any;
cancel?: boolean | PromiseLike<boolean>;
}

官方團隊還分離了 jQuery 類型以確保它們僅與 jQuery 一起使用，例如以前有以下類型的屬性：Promise<T> 和 JQueryPromise<T>。 即使您的項目沒有使用 jQuery，也可以為這些屬性分配jQuery promise。從 v21.1 開始，屬性僅在使用 jQuery 時接受 JQueryPromise<T>，否則接受 Promise<T>。

此外還繼續擴展TS定義，在未來的發布周期中，您可以期待以下增強功能：

• 更嚴格的類型（無）
• 增強的數據層類型
• 更多可重用類型

DevExtreme | 下載試用

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

DevExpress技術交流群6：600715373      歡迎一起進群討論