web-dev-qa-db-ja.com

Typescript：2つの変数の追加を試みますが、2つの変数の連結を取得します

TypeScriptクラスには3つの変数があります。

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

クラスの別の部分では、2つの変数AとBを追加しようとします：

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

そして、HTMLテンプレートにCを表示します

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

私の問題は、2つの変数(20+50=70)を追加する代わりに、連結（2050）を取得することです!!

誰かが私を助けてくれますか？

[〜＃〜] update [〜＃〜]：

問題を引き起こす正確なコード部分は次のとおりです。

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

[〜＃〜] update [〜＃〜]

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);
    }
}
javascripttypescriptaddition
14
Nacim Idjakirene

インターフェースで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

（ 遊び場のコード全体 ）

16
Nitzan Tomer

数字の前に+を付けます：

let a = +b + +c;

ref

18
Marvin Zumbado

問題は、変数の型キャストが行われないことです。次の方法で行う必要があります。

A：parseInt（number）; B：parseInt（number）;

連結の代わりに合計C = A + bが得られます。

1
Smit Shah

つまり、A変数またはB変数のいずれかに文字列値があります。安全でない部分がないかコードを確認してください。つまり、<any>、およびインターフェイスへのサーバー応答のキャスト。そのため、string変数にnumber値が含まれる可能性があります。

0
Tamas Hegedus

最後に、エラーの原因を見つけ、htmlテンプレートからページ変数を取得します（入力値）。関数パラメーターで数値型として定義されていますが、実際には文字列であり、TypeScriptは変数の型をチェックできませんhtmlテンプレート。したがって、try parseInt（page）static typpingでエラーがハイライトされます。ページ変数に「」タイプを指定してから、parseIntをページ変数に適用することで問題を解決しました。

0
Nacim Idjakirene

私は同様の問題に遭遇し、以下のように解決することができました：

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

は、数値を文字列に変換し、再び数値に解析するのは愚かなようですが、これが私の問題を解決した方法です。

0
pritesh agrawal