Generate types for event emitters (#1394)

Author: const314

packages/devextreme-angular-generator/package.json

@@ -1,7 +1,7 @@
 {
   "author": "Developer Express Inc.",
   "name": "devextreme-angular-generator",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Angular UI and visualization components based on DevExtreme widgets",
   "repository": {
     "type": "git",

packages/devextreme-angular-generator/spec/tests/metadata-generator.spec.js

@@ -235,6 +235,15 @@ describe("metadata-generator", function() {
                             onTestEvent: {
                                 IsEvent: true,
                             },
+                            onTestTypedEvent: {
+                                IsEvent: true,
+                                TypeImports: [
+                                    {
+                                        "Name": "SomeEvent",
+                                        "Path": "some/module"
+                                    }
+                                ]
+                            },
                             simpleTypedProperty: {
                                 PrimitiveTypes: [
                                     "boolean"
@@ -337,6 +346,7 @@ describe("metadata-generator", function() {
         it("should generate proper typed events", function() {
             expect(metas.DxTypedWidget.events.map(p => p.type)).toEqual([
                 'EventEmitter<any>',
+                'EventEmitter<SomeEvent>',
                 'EventEmitter<boolean>',
                 'EventEmitter<string' + TYPES_SEPORATOR + 'number>',
                 'EventEmitter<dxComplexType1>',
@@ -352,6 +362,10 @@ describe("metadata-generator", function() {
                     importString: "DevExpress",
                     path: "widgetPackageName/bundles/dx.all",
                 },
+                {
+                    importString: "{ SomeEvent }",
+                    path: "widgetPackageName/some/module",
+                },
                 {
                     importString: "{ dxComplexType1, dxComplexType2 }",
                     path: "widgetPackageName/ui/dx_complex_types",

packages/devextreme-angular-generator/src/metadata-generator.ts

@@ -175,13 +175,14 @@ export default class DXComponentMetadataGenerator {
 
                 if (option.IsEvent) {
                     let eventName = inflector.camelize(optionName.substr('on'.length), true);
+                    const eventType = option.TypeImports?.length ? option.TypeImports[0].Name : 'any';
 
                     events.push({
                         docID: option.DocID,
                         isDeprecated: option.IsDeprecated,
                         emit: optionName,
                         subscribe: eventName,
-                        type: 'EventEmitter<any>'
+                        type: `EventEmitter<${eventType}>`
                     });
                 } else {
                     let typesDescription = this.getTypesDescription(option);
@@ -319,6 +320,12 @@ export default class DXComponentMetadataGenerator {
         return '';
     }
 
+    private getEventType(typesDescription: TypeDescription, option?: Option) {
+        if (!(option?.IsEvent && option.TypeImports?.length)) {
+            return this.getType(typesDescription);
+        }
+        return `((e: ${option.TypeImports[0].Name}) => void)`;
+    }
     private getType(typesDescription: TypeDescription) {
         let primitiveTypes = typesDescription.primitiveTypes.slice(0);
         let result = 'any';
@@ -436,9 +443,14 @@ export default class DXComponentMetadataGenerator {
 
         for (let optName in nestedOptions) {
             let nestedOption = nestedOptions[optName];
+
             let typesDescription = this.getTypesDescription(nestedOption);
             let propertyType = this.getType(typesDescription);
 
+            if (nestedOption.IsEvent && nestedOption.IsEvent && nestedOption.TypeImports?.length) {
+                propertyType = `((e: ${nestedOption.TypeImports[0].Name}) => void)`;
+            }
+
             let property: Property = {
                 docID: nestedOption.DocID,
                 isDeprecated: nestedOption.IsDeprecated,
@@ -514,9 +526,10 @@ export default class DXComponentMetadataGenerator {
                                     typesDescription.arrayTypes,
                                     property.typesDescription.arrayTypes);
 
-                                existingProperty.type = this.getType(typesDescription);
+                                existingProperty.type = existingProperty.option?.IsEvent
+                                    ? this.getEventType(typesDescription, existingProperty.option)
+                                    : this.getType(typesDescription);
                             }
-
                             return properties;
                         }, []);
 

packages/devextreme-angular/package.json

@@ -38,7 +38,7 @@
     "core-js": "^2.6.12",
     "del": "^2.2.2",
     "devextreme": "23.1-next",
-    "devextreme-angular-generator": "^2.0.2",
+    "devextreme-angular-generator": "^2.1.0",
     "devextreme-internal-tools": "^10.0.0-beta.6",
     "gulp": "^4.0.2",
     "gulp-header": "^1.8.12",