原創|行業資訊|編輯:龔雪|2025-08-15 11:07:35.293|閱讀 92 次
概述:本文將為大家介紹DevExtreme Angular UI 控件在新版本中引入的全新嚴格類型配置組件,旨在提升代碼可讀性、類型安全性和開發效率,并規劃了舊組件的逐步替換計劃。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現代Web開發堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序。從Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含高性能和響應式UI小部件集合,可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
DevExpress技術交流群11:749942875 歡迎一起進群討論
如果您之前使用過 DevExtreme 的 Angular 組件,可能會接觸過帶有 dxo- 和 dxi- 前綴的配置組件。這些輔助組件簡化了控件配置過程,符合 Angular 架構原則,并提升可讀性。它們在處理嵌套選項時尤其有用,例如在 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 為例,詳細講述舊有配置組件的工作方式。這是一個“通用”組件,不僅僅用于 dx-toolbar,還廣泛出現在 Form 和 List 等多個 DevExtreme 組件中。
雖然這提供了統一性(即同一組件可復用),但缺點也很明顯:根據父組件的不同,Dxi-item需要完全不同的選項集,這使得精確的輸入變得復雜。
下面的屏幕截圖說明了IDE如何在兩個不同的上下文中為dxi-item顯示相同的通用屬性列表。例如,form組項的預期屬性與甘特圖上下文菜單項中使用的屬性有很大不同。
我們的核心目標之一是提供完整、健壯的 TypeScript 支持,確保所有DevExtreme組件都嚴格類型化,并遵循現代 TypeScript 規范。這能改善 IDE 自動補全、早期捕捉錯誤,并增強重構過程中的信心。
不過,要在現有 dxo- 和 dxi- 組件上強制實施嚴格類型是一項復雜的挑戰。這可能影響大量項目,并在升級到DevExtreme的新版本后引發重大更改。而且,原有配置架構的通用性不利于類型精確化。
在 DevExtreme v24.2 中,官方引入了一套全新的配置組件——它們具備嚴格類型、可無縫集成到 Angular 應用中,顯著提升開發體驗。
每個 UI 組件現在都有其專屬配置組件集,這標志著在可預測性和類型安全方面向前邁出了重要一步。以下是主要變化及其優勢:
配置組件名現在包含了它們的父組件名,這提高了代碼的可讀性,避免命名沖突,讓模板結構更易理解。
例如,以前的 dxi-item 現已改為:
這種命名約定有助于IDE識別組件上下文,并為開發人員提供更清晰的結構視圖,使復雜的配置更容易導航和維護。
新的配置組件現在只包含與其特定父組件相關的屬性,這消除了IDE建議一長串不相關選項的情況。例如,dxi-data-grid-column只顯示適用于DataGrid列的屬性。因此,IDE建議現在更加準確和有用:
大多數新的配置屬性都是嚴格類型化的,未來也會繼續完善,這意味著任何對組件API的誤用都將在編譯期間被捕獲(早在它可能導致運行時問題之前)。
新版配置組件相較舊架構更穩健現代、抗錯率更高,并更契合 TypeScript 類型系統。我們將分階段將整個 DevExtreme Angular 生態切換至此新模型。為了確保用戶的平穩和可預測的遷移,請考慮以下時間表/關鍵里程碑:
DevExtreme v25.1:
DevExtreme v25.2:
DevExtreme v26.1:
官方將繼續支持這些用戶遷移到我們的新配置組件,目標是確保用戶都擁有順利完成過渡所需的資源和指導。
DevExtreme v26.2:
所有舊配置組件將從代碼庫中移除。
官方目標是讓過渡過程清晰、可控、安全,嚴格的類型支持不僅是趨勢,更是可擴展、可預測、安全開發的核心。
更多產品資訊及授權,歡迎來電咨詢:023-68661681
慧都是?家?業數字化解決?案公司,專注于軟件、?油與?業領域,以深?的業務理解和?業經驗,幫助企業實現智能化轉型與持續競爭優勢。
慧都是DevExpress的中國區的合作伙伴,DevExpress作為用戶界面領域的優秀產品,幫助企業高效構建權限管理、數據可視化(如網格/圖表/儀表盤)、跨平臺系統(WinForms/ASP.NET/.NET MAUI)及行業定制解決方案,加速開發并強化交互體驗。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都網