I have this properties

export interface IOurFirstSpfWebPartWebPartProps {

  description: string;

  n1: number;

  n2: number;



}

Then I have this method

public render(): void {

    this.domElement.innerHTML = `

      <div class=${styles.ourFirstSpfWebPart}>

        <div class=${styles.container}>

          <div class=ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}>

            <div class=ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1>

              <span class=ms-font-xl ms-fontColor-white>Welcome to SharePoint!</span>

              <p class=ms-font-l ms-fontColor-white>Customize SharePoint experiences using Web Parts.</p>

              <p class=ms-font-l ms-fontColor-white>${this.properties.n1} + ${this.properties.n2}</p>

              <a href=https://github.com/SharePoint/sp-dev-docs/wiki class=ms-Button ${styles.button}>

                <span class=ms-Button-label>Learn more</span>

              </a>

            </div>

          </div>

        </div>

      </div>`;

  }

However this is printing 1+2 instead of 3.