Geek Answers Handbook

Typescript: attempt to add two variables but get concatenation of two

I have three variables in the Typescript class:

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

in another part of the class, I am trying to add two variables A and B:

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

and I show C in the html template

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

My problem is that instead of adding the TWO variable (20+50=70) I get concatenation (2050) !!

Can anybody help me?

UPDATE :

Here is the exact piece of code that causes the problem:

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

Please note that pageLastNumber is declared as the type of number, LINE_OFFSET is the type of number, I found a solution to this problem, but the Typescript compiler generates an error (forbidden evaluation):

 //// .... 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); } }
+5
source share
6 answers

When you declare in the interface that the property is number , then it remains only as an declaration, it will not be translated into javascript.

For instance:

 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, json has a and b as strings, not as numbers, and declares them as numbers in the interface that do not affect the execution result.

If what you get from your server is encoded as strings instead of numbers, you will 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

( all code on the playground )

+8
source

add numbers with +:

 let a = +b + +c;

ref

+4
source

The problem is that the typecasting variable is not running. You need to do the following.

A: parseInt (number); B: parseInt (number);

then you get the sum C = A + b instead of concatenation.

+1
source

This means that there are string values ​​in variables A or B. Check the code for unsafe details, I mean listing on <any> and server-server responses to interfaces. This can lead to string values ​​in number variables.

0
source

Finnaly, I found the cause of the error, I get the page variable from the html template (its input value), it is defined as the type of number in the function parameter, but in fact it is a string and typescript can not check the type of the variable from the html template, so when static typing try parseInt (page) throws an error! I posed a problem by specifying a page variable of type "" and then applying parseInt to the page variable.

0
source

I ran into a similar problem, was able to solve as shown below:

 C:number =0; A:number=12; B:number=0.4; C= Number.parseInt(A.toString()) + Number.parseFloat(B.toString()); console.log("C=" + C );

it seems silly to convert a number to a string and parse it back to a number, but that is how I solved my problem.

0
source

More articles:


All Articles