初級

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

文字列と数値を+で連続してつなげると、最初の+で文字列に変換され、それ以降の+はすべて文字列連結として扱われます。型注釈で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  );
                        ^

 1  const a: number = 5;
 2  const b: number = 6;
 3  console.log("和: " + a + b  );
                       ^

 1  const w: number = 2;
 2  const h: number = 8;
 3  console.log("面積: " + w + h  );
                        ^

よくある誤解

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

実務での勘所

+演算子そのものの挙動を型チェックが止めることはありませんが、その結果を別の場所で使おうとすると型の不一致として発覚することがあります。number型のつもりで書いた合計をtotal: string = a + bのような箇所で受けようとすると、+の結果が実際にはstring型になっているため、代入の時点で型エラーとして検出されます。演算そのものではなく、その結果を使う場所で間接的に守られることがある、という理解が実務では役立ちます。

演習をはじめる

関連するエラー

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