I am trying to implement myown cell renderer following this example https://www.ag-grid.com/javascript-data-grid/cell-rendering/ , but in typescript . When I declare a class which implements ICellRenderer interface and try to implement the inteface methods I get a compile time error "Property 'eGui' does not exist on type 'MessageCellRenderer'."

This is part of my ts file where I define the renderer as well as the view which contains the grid. NOTE: The grid displays fine without the cell renderer but I need to style the cells based on displayed values , hence trying to use the cell render.

import {ErrorFilterView} from "./error-dialog/error-filter-view";
import {ICellRenderer} from 'ag-grid-community/main';

var agGrid = require('../../../../node_modules/ag-grid-community');

class MessageCellRenderer implements ICellRenderer{
  
  init(params) {
    this.eGui = document.createElement('span');
    if (params.value !== '' || params.value !== undefined) {
      this.eGui.innerHTML = `'<span class="error_read_#: params.value# error-item_#: Id#">#:Message#</span>'`;
    }
  }

   // gets called once when grid ready to insert the element
   public getGui() {
    return this.eGui;
  };

  // gets called whenever the user gets the cell to refresh
   public refresh(params) {
     // set value into cell again
     this.eValue.innerHTML = params.value;
   };

 // gets called when the cell is removed from the grid
 public destroy() {
   // do cleanup, remove event listener from button

  };
}

export var NotificationsDialogView = (viewModel : ErrorDialogViewModel) => {
  if (!viewModel.getIsInitialized()) return;

  var messageGrid: any;
  var config = (element : any, isInitialized : boolean, context : any) => {

    mdlInit(element, isInitialized, context);