Merge pull request #7 from DuckTieCorpMember/25.1.3+

add stronger typing

Author: DuckTieCorpMember

Angular/package-lock.json

@@ -3,7 +3,6 @@ import {
   ViewChild,
 } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-
 import CustomStore from 'devextreme/data/custom_store';
 import { DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view';
 import Popup from 'devextreme/ui/popup';

Angular/src/app/app.component.ts

@@ -4,10 +4,9 @@ import {
 import './App.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
 import DropDownBox from 'devextreme-react/drop-down-box';
-import TreeView from 'devextreme-react/tree-view';
-import TagBox from 'devextreme-react/tag-box';
+import TreeView, { type TreeViewTypes, type TreeViewRef } from 'devextreme-react/tree-view';
+import TagBox, { type TagBoxTypes } from 'devextreme-react/tag-box';
 import CustomStore from 'devextreme/data/custom_store';
-import type { TreeViewRef } from 'devextreme-react/tree-view';
 
 function makeAsyncDataSource(jsonFile: string): CustomStore {
   return new CustomStore({
@@ -39,17 +38,17 @@ function App(): JSX.Element {
     }
   }, []);
 
-  const onTreeViewContentReady = useCallback((e: any) => {
+  const onTreeViewContentReady = useCallback((e: TreeViewTypes.ContentReadyEvent) => {
     const treeViewInstance = e.component;
     syncTreeViewSelection(treeViewInstance, selectedValues);
   }, [selectedValues, syncTreeViewSelection]);
 
-  const onTreeViewSelectionChanged = useCallback((e: any) => {
+  const onTreeViewSelectionChanged = useCallback((e: TreeViewTypes.ItemSelectionChangedEvent) => {
     const selectedKeys = e.component.getSelectedNodeKeys();
     setSelectedValues(selectedKeys);
   }, []);
 
-  const onTagBoxValueChanged = useCallback((e: any) => {
+  const onTagBoxValueChanged = useCallback((e: TagBoxTypes.ValueChangedEvent) => {
     setSelectedValues(e.value);
     const treeViewInstance = treeViewRef.current?.instance();
     syncTreeViewSelection(treeViewInstance, e.value);

React/package-lock.json

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import DxDropDownBox from 'devextreme-vue/drop-down-box';
-import DxTreeView from 'devextreme-vue/tree-view';
-import DxTagBox from 'devextreme-vue/tag-box';
+import DxDropDownBox, { type DxDropDownBoxTypes, type DxDropDownBox as DxDropDownBoxType } from 'devextreme-vue/drop-down-box';
+import DxTagBox, { type DxTagBoxTypes } from 'devextreme-vue/tag-box';
 import DxTextBox from 'devextreme-vue/text-box';
-import type { DxTreeView as DxTreeViewType } from 'devextreme-vue/tree-view';
-import type { DxDropDownBox as DxDropDownBoxType } from 'devextreme-vue/drop-down-box';
+import DxTreeView, { type DxTreeView as DxTreeViewType, type DxTreeViewTypes } from 'devextreme-vue/tree-view';
 import CustomStore from 'devextreme/data/custom_store';
 
 const treeViewRef = ref<DxTreeViewType | null>(null);
@@ -38,11 +36,11 @@ const syncTreeViewSelection = (treeViewInstance: any, value: string[]): void =>
   }
 };
 
-function onDropDownBoxInitialized(e: any): void {
+function onDropDownBoxInitialized(e: DxDropDownBoxTypes.InitializedEvent): void {
   popup = e.component;
 }
 
-function onTagBoxValueChanged(e: any): void {
+function onTagBoxValueChanged(e: DxTagBoxTypes.ValueChangedEvent): void {
   treeBoxValue.value = e.value;
 
   if (dropDownBoxRef.value?.instance) {
@@ -59,12 +57,12 @@ function onTagBoxValueChanged(e: any): void {
   }
 }
 
-function onTreeViewContentReady(e: any): void {
+function onTreeViewContentReady(e: DxTreeViewTypes.ContentReadyEvent): void {
   const value = (dropDownBoxRef.value?.instance?.option('value')) || treeBoxValue.value;
   syncTreeViewSelection(e.component, value);
 }
 
-function onTreeViewItemSelectionChanged(e: any): void {
+function onTreeViewItemSelectionChanged(e: DxTreeViewTypes.ItemSelectionChangedEvent): void {
   const selectedKeys = e.component.getSelectedNodeKeys();
   treeBoxValue.value = selectedKeys;