打字稿：尝试添加两个变量，但得到两个变量的连接答案

【问题标题】：Typescript : Trying the addition of two variables but get the concatenation of the two打字稿：尝试添加两个变量，但得到两个变量的连接
【发布时间】：2023-03-20 06:31:01
【问题描述】：

我的 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>

我的问题是，我没有添加两个变量 (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);
    }
}

【问题讨论】：

请在您的问题中添加为A 和B 赋值的部分
这些属性的声明方式没有区别，如果在运行时你得到一个字符串，那么无论它们是否被声明为数字，它都是一个字符串。 this.LINE_OFFSET 是如何分配的？另外，不要使用eval，使用parseInt或parseFloat或Number

标签： javascript typescript addition

【解决方案1】：

在数字前加上 +:

let a = +b + +c;

ref

【讨论】：

我不知道为什么 OP 没有选择这个简单的解决方案。可能不实用？
@VijayKumarKanta 它没有解决您否决 TypeScript 类型推断的问题的核心。您现在必须否决否决。因此，您实际上并没有使用 TypeScript - 您正在编写带有额外步骤的 JavaScript，并且没有从 TS 的任何核心功能中受益。

【解决方案2】：

当您在接口中声明属性为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 将 a 和 b 作为字符串而不是数字，并且在接口中将它们声明为数字对运行时结果没有影响。

如果您从服务器获得的信息被编码为字符串而不是数字，那么您需要将它们转换，例如：

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)

【讨论】：

【解决方案3】：

问题是未完成变量类型转换。您需要按照以下方式进行。

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

那么你将得到 sum C= A+b 而不是串联。

【讨论】：

这不是类型转换，而是转换。此外，在他的示例中，number 不是变量，而是类型声明。

【解决方案4】：

我遇到了类似的问题，可以解决如下：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

在我的服务器响应接口中，我试图显示的变量被声明为“数字”类型！
@NacimIdjakirene 你检查服务器响应了吗？也许类型接口是错误的！如果服务器响应与 typescript 中的类型接口不匹配，它仍然未被检测到，因为 typescript 不会执行运行时类型检查，它只是假定正确的类型。

【解决方案6】：

最后我找到了导致错误的原因，我从 html 模板中获取页面变量（它是一个输入值），它在函数参数中定义为数字类型，但实际上是一个字符串，打字稿无法检查类型来自 html 模板的变量，因此当尝试 parseInt(page) 静态输入时会突出显示错误！我通过给页面变量一个“”类型来解决这个问题，然后将 parseInt 应用于页面变量。

【讨论】：

【解决方案7】：

常量值 = Number(stringOrNum)+1;

【讨论】：