Generate HTML from Typescript

DOMinator.ts

// Library
// Simple transformation of Javascript to HTML.
class Dominator {
    private readonly eventListeners: any[];
    private readonly children: any[];
    private element: any;
    private id: any;
    private content: any;
    private properties: any;
    private tag: any;
    private classes: any;

    constructor(object) {
        Object.assign(this, object);
        const childObjects = [];
        if (object.children){
            for (const child of object.children) {
                const childObject = new Dominator(child);
                childObjects.push(childObject);
            }
        }
        this.eventListeners = [];
        this.children = childObjects;
        this.element = this.domElement;
    }

    get domElement(): HTMLElement {
        const domElement = document.createElement(this.tag);
        if (this.id) domElement.id = this.id;
        if (this.content) domElement.innerText = this.content;
        if (this.properties) {
            // old for in
            for (const prop of this.properties) {
                domElement[prop] = this.properties[prop];
            }
        }
        if (this.classes) {
            for (const cssClass of this.classes) {
                domElement.classList.add(cssClass);
            }
        }
        if (this.children) {
            for (const child of this.children) {
                domElement.append(child.domElement);
                if (child.id) this[child.id] = child.domElement;
            }
        }
        if (this.eventListeners) {
            for (const eventListener of this.eventListeners) {
                domElement.addEventListener(eventListener.type, eventListener.action);
            }
        }
        this.element = domElement;
        return domElement;
    }

    findChildById(id): any {
        if (this.children) {
            for (const child of this.children) {
                if (child.id === id) {
                    return child;
                } else if (child.children) {
                    const found = child.findChildById(id);
                    if (found) return found;
                }
            }
        }
        return false;
    }

    event(action, id, type = 'click'): any {
        if (id) {
            const node = this.findChildById(id);
            if (node) {
                node.eventListeners.push({type: type, action: action});
            }
        } else {
            this.eventListeners.push({type: type, action: action});
        }
    }
}

// Javascript structure to be converted to HTML
// Obj - It is the data that you would see from the Database / API
const Templates = {
  docIcon: function(obj) {
    return {
      tag: 'div',
      id: obj.id,
      classes: ['doc-icon'],
      properties: {
        title: obj.name,
        tabIndex: 0
      },
      children: [
        {
          tag: 'div',
          classes: ['doc-icon-header'],
          children: [
            { tag: 'h3', content: obj.name }
          ]
        },
        {
          tag: 'p',
          content: obj.exerp
        },
        {
          tag: 'div',
          id: 'docControls',
          classes: ['doc-controls'],
          children: [
            {
              tag: 'button',
              classes: ['doc-control'],
              id: 'moveDoc',
              children: [
                {
                  tag: 'i',
                  classes: ['fa', 'fa-folder']
                }
              ]
            },
            {
              tag: 'button',
              classes: ['doc-control'],
              id: 'deleteDoc',
              children: [
                {
                  tag: 'i',
                  classes: ['fa', 'fa-trash']
                }
              ]
            }
          ]
        }
      ]
    }
  }
}


// Instantiating the doc Icon template
const template1 = new Dominator(Templates.docIcon({name: 'Glauber Funez'}))

// Get the Dom
console.log(template1.domElement);