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和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

獲取DevExtreme v25.1正式版下載

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

如果您之前使用過 DevExtreme 的 Angular 組件，可能會接觸過帶有 dxo- 和 dxi- 前綴的配置組件。這些輔助組件簡化了控件配置過程，符合 Angular 架構(gòu)原則，并提升可讀性。它們在處理嵌套選項時尤其有用，例如在 dx-data-grid 中使用 dxo-pager 來配置分頁選項。

<dx-data-grid [dataSource]="dataSource">
<dxo-pager
[visible]="true"
[showPageSizeSelector]="true" >
</dxo-pager>
</ dx-data-grid>

它們也適用于配置集合項，比如在 dx-toolbar 中使用 dxi-item 聲明工具欄項：

<dx-toolbar>
<dxi-item location="before" widget="dxButton" >
</dxi-item>
</dx-toolbar>

下面以 dxi-item 為例，詳細(xì)講述舊有配置組件的工作方式。這是一個“通用”組件，不僅僅用于 dx-toolbar，還廣泛出現(xiàn)在 Form 和 List 等多個 DevExtreme 組件中。

雖然這提供了統(tǒng)一性（即同一組件可復(fù)用），但缺點也很明顯：根據(jù)父組件的不同，Dxi-item需要完全不同的選項集，這使得精確的輸入變得復(fù)雜。

下面的屏幕截圖說明了IDE如何在兩個不同的上下文中為dxi-item顯示相同的通用屬性列表。例如，form組項的預(yù)期屬性與甘特圖上下文菜單項中使用的屬性有很大不同。

我們的核心目標(biāo)之一是提供完整、健壯的 TypeScript 支持，確保所有DevExtreme組件都嚴(yán)格類型化，并遵循現(xiàn)代 TypeScript 規(guī)范。這能改善 IDE 自動補(bǔ)全、早期捕捉錯誤，并增強(qiáng)重構(gòu)過程中的信心。

不過，要在現(xiàn)有 dxo- 和 dxi- 組件上強(qiáng)制實施嚴(yán)格類型是一項復(fù)雜的挑戰(zhàn)。這可能影響大量項目，并在升級到DevExtreme的新版本后引發(fā)重大更改。而且，原有配置架構(gòu)的通用性不利于類型精確化。

全新配置組件：有何變化，為什么重要

在 DevExtreme v24.2 中，官方引入了一套全新的配置組件——它們具備嚴(yán)格類型、可無縫集成到 Angular 應(yīng)用中，顯著提升開發(fā)體驗。

每個 UI 組件現(xiàn)在都有其專屬配置組件集，這標(biāo)志著在可預(yù)測性和類型安全方面向前邁出了重要一步。以下是主要變化及其優(yōu)勢：

更清晰、更能感知上下文的配置組件

配置組件名現(xiàn)在包含了它們的父組件名，這提高了代碼的可讀性，避免命名沖突，讓模板結(jié)構(gòu)更易理解。

例如，以前的 dxi-item 現(xiàn)已改為：

• dxi-toolbar-item（用于 dx-toolbar）
• dxi-form-item（用于 dx-form）
• dxi-context-menu-item（用于 dx-context-menu）

這種命名約定有助于IDE識別組件上下文，并為開發(fā)人員提供更清晰的結(jié)構(gòu)視圖，使復(fù)雜的配置更容易導(dǎo)航和維護(hù)。

嚴(yán)格類型與更佳開發(fā)體驗

新的配置組件現(xiàn)在只包含與其特定父組件相關(guān)的屬性，這消除了IDE建議一長串不相關(guān)選項的情況。例如，dxi-data-grid-column只顯示適用于DataGrid列的屬性。因此，IDE建議現(xiàn)在更加準(zhǔn)確和有用：

 大多數(shù)新的配置屬性都是嚴(yán)格類型化的，未來也會繼續(xù)完善，這意味著任何對組件API的誤用都將在編譯期間被捕獲（早在它可能導(dǎo)致運行時問題之前）。

后續(xù)計劃：全面采用新版配置組件

新版配置組件相較舊架構(gòu)更穩(wěn)健現(xiàn)代、抗錯率更高，并更契合 TypeScript 類型系統(tǒng)。我們將分階段將整個 DevExtreme Angular 生態(tài)切換至此新模型。為了確保用戶的平穩(wěn)和可預(yù)測的遷移，請考慮以下時間表/關(guān)鍵里程碑：

DevExtreme v25.1：

• 所有示例和幫助文檔將開始使用新模型；
• 官方建議所有新的 Angular 應(yīng)用從一開始就采用新版配置組件；
• v25.1 引入的所有功能均需使用新的配置組件。

DevExtreme v25.2：

• 使用舊配置組件將觸發(fā)棄用警告；
• 舊系統(tǒng)不再接收新功能，在25.2和以后的版本中引入的任何新功能都需要使用新的配置組件；
• 官方會提供文檔、遷移指南和輔助工具，幫助平滑過渡。

DevExtreme v26.1：

官方將繼續(xù)支持這些用戶遷移到我們的新配置組件，目標(biāo)是確保用戶都擁有順利完成過渡所需的資源和指導(dǎo)。

DevExtreme v26.2：

所有舊配置組件將從代碼庫中移除。

官方目標(biāo)是讓過渡過程清晰、可控、安全，嚴(yán)格的類型支持不僅是趨勢，更是可擴(kuò)展、可預(yù)測、安全開發(fā)的核心。

更多產(chǎn)品資訊及授權(quán)，歡迎來電咨詢：023-68661681

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗，幫助企業(yè)實現(xiàn)智能化轉(zhuǎn)型與持續(xù)競爭優(yōu)勢。

慧都是DevExpress的中國區(qū)的合作伙伴，DevExpress作為用戶界面領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)高效構(gòu)建權(quán)限管理、數(shù)據(jù)可視化（如網(wǎng)格/圖表/儀表盤）、跨平臺系統(tǒng)（WinForms/ASP.NET/.NET MAUI）及行業(yè)定制解決方案，加速開發(fā)并強(qiáng)化交互體驗。