how to sum 2 numbers in typescript

Question

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.

Because + also works as a concatenation operator and that's what seems to be done in your code.So its printing 1+2 and not 3. instead try adding your expression in curly braces it will work. — Manish
– Manish, Commented Sep 10, 2016 at 2:34

Andre Hofmeister · Accepted Answer · 2020-04-01 05:45:45Z

15

Add an extra +, for every argument which you want to add. You need to do it like: this.sum = +this.num1 + +this.num2;.

edited Apr 1, 2020 at 5:45

Andre Hofmeister

3,45511 gold badges55 silver badges80 bronze badges

answered Aug 14, 2017 at 13:16

Vivek Shukla

7419 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vivek Shukla Over a year ago

@JohanMorales Nice to hear that. Its motivating for me

the_5imian · Accepted Answer · 2016-10-06 00:51:25Z

3

You answer is related to implicit coercion in javascript. Simply put, you're concatinating two strings in a template and not adding two numbers.

When you hit the {}s in your templating syntax, your numbers will be stringified. In essence you are then adding

"1" + "2" = "12"

instead of

1 + 2 = 3

You can try two things:

put both expressions inside of the {}

${this.properties.n1 + this.properties.n2}

If that still makes "12" then

Try ${parseInt(this.properties.n1) + parseint(this.properties.n2)}. That will coerce both values to a number first, if it can be done.

You can learn more about type coercion in the article You Don't Know JS: Types & Grammar, where it will really explain all the 'gotchas' out there about the + operator and implicit types.

edited Oct 6, 2016 at 0:51

answered Sep 10, 2016 at 2:41

the_5imian

8964 silver badges7 bronze badges

Comments

tygor · Accepted Answer · 2016-09-10 02:35:29Z

2

The tick mark creates a template literal. I think you're looking for: ${this.properties.n1 + this.properties.n2}—all inside the same curly braces.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

answered Sep 10, 2016 at 2:35

tygor

212 bronze badges

3 Comments

Luis Valencia Over a year ago

still concatenating... :(, properties are defined as numbers

tygor Over a year ago

I suppose you could wrap the properties in Number.parseInt(): Number.parseInt(foo) + Number.parseInt(bar)

Alexei Levenkov Over a year ago

@LuisValencia-MVP are you sure you've actually updated code - I'd recommend starting with minimal reproducible example like function f(){ var x = 3; console.log(`test ${x}+${x}=${x + x} `);}; f(); in your browser console...

Marvin Zumbado · Accepted Answer · 2017-08-13 13:12:51Z

1

prepend the numbers with a + sign

answered Aug 13, 2017 at 13:12

Marvin Zumbado

1,0051 gold badge9 silver badges10 bronze badges

Collectives™ on Stack Overflow

how to sum 2 numbers in typescript

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related