Javascript 打字稿：尝试添加两个变量，但获得两个变量的连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39269701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript : Trying the addition of two variables but get the concatenation of the two
提问by Nacim Idjakirene
I have three variable in my Typescript class :
我的 Typescript 类中有三个变量：
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 :
在课程的另一部分，我尝试添加两个变量 A 和 B ：
this.C = this.A+this.B; // A =20 and B = 50;
and I display C in the html template
我在 html 模板中显示 C
<span>{{C}}</span>
My problem is, instead of getting the addition of the TWO variable (20+50=70)i get the concatenation (2050)!!
我的问题是，(20+50=70)我得到了串联（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):
请注意，pageLastNumber 被声明为数字类型，LINE_OFFSET 是 olso 数字类型，我找到了解决此问题的方法，但打字稿编译器输出错误（禁止 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 :
这是 LINE_OFFSET 变量的声明：
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);
}
}
采纳答案by Nitzan Tomer
When you declare in an interface that a property is a numberthen it stays as a declaration only, it won't be translated into javascript.
当您在接口中声明属性为 a 时number，它仅作为声明保留，不会转换为 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 aand bas strings and not as numbers and declaring them as numbers in the interface has no effect on the runtime result.
如您所见，json 将aandb作为字符串而不是数字，并且在接口中将它们声明为数字对运行时结果没有影响。
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
（操场上的完整代码）
回答by Smit Shah
Problem is variable typecasting not done. You need to do in following way.
问题是变量类型转换没有完成。您需要按照以下方式进行。
A : parseInt(number); B : parseInt(number);
A : parseInt(number); B : parseInt(number);
then you will get sum C= A+b instead of concatenation.
那么你会得到 sum C= A+b 而不是串联。
回答by Nacim Idjakirene
Finnaly i find what cause the error, i get the page variable from the html template (its an input value), it is defined as number type in the function parameter, but in reality is a string and typescript cant check the type of variable from html template, so when a try parseInt(page) static typping highlight an error ! i have soved the issue by giving the page variable an "" type, then applying parseInt to the page variable.
最后我找到了导致错误的原因，我从 html 模板中获取页面变量（它是一个输入值），它在函数参数中被定义为数字类型，但实际上是一个字符串，打字稿无法检查变量的类型html 模板，所以当尝试 parseInt(page) 静态打字时会突出显示错误！我通过给页面变量一个“”类型解决了这个问题，然后将 parseInt 应用到页面变量。
回答by pritesh agrawal
I ran into similar problem , was able to solve as below :
我遇到了类似的问题，能够解决如下：
C:number =0;
A:number=12;
B:number=0.4;
C= Number.parseInt(A.toString()) + Number.parseFloat(B.toString());
console.log("C=" + C );
seems stupid , to convert a number to string and parse again to number , but this is how I solved my problem.
将数字转换为字符串并再次解析为数字似乎很愚蠢，但这就是我解决问题的方法。
回答by Tamas Hegedus
That means there are string values in either A or B variables. Check your code for unsafe parts, I mean casting to <any>, and casting server responses to interfaces. That could cause to have stringvalues in numbervariables.
这意味着 A 或 B 变量中有字符串值。检查您的代码是否有不安全的部分，我的意思是强制转换为<any>，并将服务器响应转换为接口。这可能会导致string在number变量中有值。
