B/S端界面组件DevExtreme——支持TypeScript、SCSS & ES6模块

在本文中我们将回顾一下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      欢迎一起进群讨论

更多DevExpress线上公开课、中文教程资讯请上中文网获取