初級

文字列と数値の+の左結合で意図しない連結になる

文字列と数値を+で連続してつなげると、最初の+で文字列に変換され、それ以降の+はすべて文字列連結として扱われます。型注釈でnumberと宣言していても、+演算子自体の挙動はJavaScriptと同じです。

なぜエラーが出ないのか

出力: 合計: 34

（エラーなし）

TypeScriptは何も報告しません。型検査も構文も正しいためです

出力: 合計: 34

実際の挙動 — 期待した結果と食い違っている箇所

見つけ方

エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます

このエラーが出る典型パターン

 1  const a: number = 3;
 2  const b: number = 4;
 3  console.log("合計: " + a + b  );
                        ^

 1  const price: number = 100;
 2  const tax: number = 10;
 3  console.log("税込: " + price + tax  );
                           ^

 1  const x: number = 1;
 2  const y: number = 2;
 3  const z: number = 3;
 4  console.log(x + y + "=" + z  );
                        ^

よくある誤解

「型を付けているのだから数値同士は先に計算されるはず」という考えは誤りです。numberという型注釈は代入できる値の種類を制限するだけで、+演算子の評価順序（左から順）までは変えません。

まとめ

文字列と数値の+の左結合で意図しない連結になるは初級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

• 配列の範囲外アクセスがエラーにならずundefinedになる（TypeScriptでも変わらない）TypeScriptは配列の要素数を型では追跡しないため、number[]のような型でも範囲外アクセスはコンパイルエラーになりません。
• 文字列メソッドは元の文字列を変更せず新しい文字列を返すtoUpperCase()のような文字列メソッドは、呼び出し元の文字列そのものを書き換えるのではなく、変換後の新しい文字列を戻り値として返します。