打字稿:尝试添加两个变量,但得到两个变量的连接

时间:2016-09-01 10:58:04

标签: javascript typescript addition

我的Typescript类中有三个变量:

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

在该类的另一部分中,我尝试添加两个变量A和B:

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

我在html模板中显示C

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

我的问题是,而不是添加TWO变量(20+50=70)我得到连接(2050)!!

有人能帮助我吗?

更新

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

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

请注意,pageLastNumber被声明为数字类型,LINE_OFFSET是olso数字类型,我找到了解决此问题但是typescript编译器输出错误(禁止eval):

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

更新

以下是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);
    }
}

7 个答案:

答案 0 :(得分:15)

当您在接口中声明属性为number时,它仅作为声明保留,它不会被转换为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将ab作为字符串而不是数字,并将它们声明为接口中的数字对运行时结果没有影响。

如果您从服务器获得的内容被编码为字符串而不是数字,那么您需要转换它们,例如:

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

答案 1 :(得分:13)

用+:

前面加上数字
let a = +b + +c;

ref

答案 2 :(得分:1)

问题是没有完成变量类型转换。 你需要按照以下方式做。

答:parseInt(数字); B:parseInt(数字);

然后你得到总和C = A + b而不是连接。

答案 3 :(得分:0)

这意味着A或B变量中都有字符串值。检查代码中的不安全部分,我的意思是转换为<any>,并将服务器响应转换为接口。这可能会导致string变量中包含number个值。

答案 4 :(得分:0)

Finnaly我找到导致错误的原因,我从html模板获取页面变量(它是一个输入值),它在函数参数中定义为数字类型,但实际上是一个字符串,打字稿不能检查类型来自html模板的变量,所以当一次尝试parseInt(页面)静态typping突出显示错误!我通过给页面变量一个“”类型,然后将parseInt应用于页面变量来解决这个问题。

答案 5 :(得分:0)

我遇到了类似的问题,能够解决如下:

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

似乎很愚蠢,将数字转换为字符串并再次解析为数字,但这就是我解决问题的方法。

答案 6 :(得分:0)

const value = Number(stringOrNum)+1;