打字稿：尝试添加两个变量，但得到两个变量的连接 [英] Typescript : Trying the addition of two variables but get the concatenation of the two

问题描述

我的Typescript类中有三个变量：

I have three variable in my Typescript class :

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

在该类的另一部分我尝试添加两个变量A和B： / p>

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;

我在html模板中显示C

and I display C in the html template

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

我的问题是，而不是添加TWO变量（20 + 50 = 70）我得到连接（2050）!!

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

有人可以帮我吗？

更新：

以下是导致问题的确切代码部分：

Here is the exact code portion that cause problem :

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

请注意，pageLastNumber被声明为数字类型，LINE_OFFSET是olso数字类型，i找到了解决这个问题的方法但是typescript编译器输出了一个错误（禁止eval）：

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!!

更新

这是LINE_OFFSET变量的声明：

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);
    }
}

推荐答案

你在一个接口中声明一个属性是数字然后它只作为声明保留，它不会被翻译成javascript。

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.

例如：

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

如你所见，json有 a 和 b 作为字符串而非数字并在接口中将它们声明为数字对运行时结果没有影响。

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

（操场上的整个代码）

这篇关于打字稿：尝试添加两个变量，但得到两个变量的连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！