Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript : Trying the addition of two variables but get the concatenation of the two

I have three variable in my Typescript class :

A:number; B:number; C:number; 

in another part of the class i try to make the addition of the two variable A and B :

this.C = this.A+this.B; // A =20 and B = 50; 

and I display C in the html template

<span>{{C}}</span> 

My problem is, instead of getting the addition of the TWO variable (20+50=70) i get the concatenation (2050)!!

Can someone help me please ?

UPDATE :

Here is the exact code portion that cause problem :

goTo(page:number,type:script) {     //         this.pageFirstLineNumber = page;     this.pageLastLineNumber = page + this.LINE_OFFSET; //concatenation!! } 

Notice that pageLastNumber is declared as number type, LINE_OFFSET is olso number type, i have found a solution to this issue but the typescript compiler output an error (forbidden eval):

//// .... this.pageFirstLineNumber = eval(page.toString()); // now It works !! this.pageLastLineNumber = page + this.LINE_OFFSET; //concatenation!! 

UPDATE

Here is the declaration of the LINE_OFFSET variable :

private _calculateOffset(fontSize: number) {     let linesDiff = (fontSize * 27) / 14;     let lines:number = 27 - (linesDiff - 27);     this.LINE_OFFSET = Math.floor(lines);     if (fontSize >= 17 && fontSize <= 20) {         this.LINE_OFFSET += (Math.floor(fontSize / 3) - 2);     }     if (fontSize > 20 && fontSize <= 23) {         this.LINE_OFFSET += (Math.floor(fontSize / 2) - 2);     }     if (fontSize > 23 && fontSize <= 25) {         this.LINE_OFFSET += (Math.floor(fontSize / 2));}     if (fontSize > 25 && fontSize <= 27) {         this.LINE_OFFSET += (Math.floor(fontSize / 2) + 1);     }     if (fontSize > 27 && fontSize <= 30) {         this.LINE_OFFSET += (Math.floor(fontSize / 2) + 4);     } } 
like image 510
Nacim Idjakirene Avatar asked Sep 01 '16 10:09

Nacim Idjakirene


People also ask

Why is my JavaScript concatenating instead of adding?

The reason that adding 2 numbers together in JavaScript is that one or more of the operands that we try to add together may not be numbers. Therefore, we should make sure that they're both numbers before trying to add them. To do this, we can convert to numbers with various functions or operators.

How do I sum two values in TypeScript?

function addNumbers(a: number, b: number) { return a + b; } var sum: number = addNumbers(10, 15) console. log('Sum of the two numbers is: ' +sum); The above TypeScript code defines the addNumbers() function, call it, and log the result in the browser's console. The above command will compile the TypeScript file add.

Is concatenating instead of adding?

JavaScript (+) sign concatenates instead of giving sum? The + sign concatenates because you haven't used parseInt(). The values from the textbox are string values, therefore you need to use parseInt() to parse the value.

How do you add a variable in TypeScript?

The type syntax for declaring a variable in TypeScript is to include a colon (:) after the variable name, followed by its type. Just as in JavaScript, we use the var keyword to declare a variable.


2 Answers

prepend the numbers with +:

let a = +b + +c; 

ref

like image 62
Marvin Zumbado Avatar answered Sep 29 '22 05:09

Marvin Zumbado


When you declare in an interface that a property is a number then it stays as a declaration only, it won't be translated into javascript.

For example:

interface Response {     a: number;     b: number; }  let jsonString = '{"a":"1","b":"2"}'; let response1 = JSON.parse(jsonString) as Response;  console.log(typeof response1.a); // string  console.log(typeof response1.b); // string console.log(response1.a + response1.b); // 12 

As you can see, the json has the a and b as strings and not as numbers and declaring them as numbers in the interface has no effect on the runtime result.

If what you get from your server is encoded as strings instead of numbers then you'll need to convert them, for example:

let response2 = {     a: Number(response1.a),     b: Number(response1.b) } as Response;  console.log(typeof response2.a); // number  console.log(typeof response2.b); // number console.log(response2.a + response2.b); // 3 

(entire code in playground)

like image 44
Nitzan Tomer Avatar answered Sep 29 '22 06:09

Nitzan Tomer