Navigation: Fix TS problems and make TS improvements in demos #32152
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request fixes TypeScript problems in React demos for VectorMap, FloatingActionButton, and Localization components, enabling the removal of exclusions from tsconfig.react-check.json.
Changes:
- Added TypeScript type definitions for VectorMap data modules and improved type safety across VectorMap demos
- Enhanced TypeScript types in FloatingActionButton demo with proper ref typing and data structure definitions
- Added global TypeScript declarations for Globalize and JSON imports in Localization demo
- Changed tooltip functions to return empty objects instead of null for consistency
- Added proper ref types and optional chaining for component instance access
Reviewed changes
Copilot reviewed 36 out of 48 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
apps/demos/tsconfig.react-check.json |
Removed exclusions for FloatingActionButton, VectorMap, and Localization demos now that TS issues are fixed |
apps/demos/Demos/VectorMap/**/React/devextreme-vectormap-data.d.ts |
Added type definitions for GeoJSON world map data (multiple files) |
apps/demos/Demos/VectorMap/**/React/data.ts |
Added type definitions for GDP and population data structures |
apps/demos/Demos/VectorMap/**/React/App.tsx |
Improved types with proper casting and optional chaining |
apps/demos/Demos/VectorMap/**/React/TooltipTemplate.tsx |
Added types for tooltip template components (with issues) |
apps/demos/Demos/VectorMap/**/React/PieChartComponent.tsx |
Added proper prop interfaces for PieChart components |
apps/demos/Demos/VectorMap/**/ReactJs/*.js |
Applied consistent changes to JavaScript versions (return {}, optional chaining) |
apps/demos/Demos/FloatingActionButton/Overview/React/data.ts |
Added comprehensive type definitions for direction configuration |
apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx |
Added proper ref typing and improved type safety |
apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts |
Added global type declarations for third-party modules |
apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| const selectedChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => { | ||
| setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0])); | ||
| }, [setSelectedRowIndex]); |
There was a problem hiding this comment.
This is an excessive dependancy, there's no need to add setters of useState hook as deps, please check other places as well
| declare module '*.json' { | ||
| const value: any; | ||
| export default value; | ||
| } | ||
|
|
||
| declare module 'globalize' { | ||
| const Globalize: any; | ||
| export default Globalize; | ||
| } |
There was a problem hiding this comment.
What's the purpose of these d.ts files?
There was a problem hiding this comment.
Hello!
Without a d.ts file, I encountered two types of errors:
-
Cannot find module 'devextreme/localization/messages/{some name}.json'. Consider using '--resolveJsonModule' to import module with '.json' extension. I can't fix tsconfig for demos and I resolved this in the d.ts level -
declare module 'globalize'We don't have types for globalize. But there is this package on npm https://www.npmjs.com/package/@types/globalize. I decided to add declare for it, just because I've created filed.tson the previous step
|
|
||
| const clickHandler = ({ target }) => { | ||
| if (target && countries[target.attribute('name')]) { | ||
| const clickHandler = ({ target }: { target: MapLayerElement }) => { |
There was a problem hiding this comment.
I think there should be an appropriate type for this handles like MapClickEvent or smth like that
|
|
||
| const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => { | ||
| const name = attribute('name'); | ||
| const name = attribute('name') as keyof typeof countries; |
There was a problem hiding this comment.
perhaps it's better to separate this type
2 participants
No description provided.