1初期値から型が決まる
注釈を書かなくても、初期値から string・number・boolean が自動で推論される基本の例です。実務のコードでは、初期値が明らかな変数はこのように注釈なしで書くのが普通です。
// 注釈がなくても、初期値から型が推論される
let cityName = "Tokyo"; // string と推論
let populationCount = 14000000; // number と推論
let isCapital = true; // boolean と推論
console.log(cityName);
console.log(populationCount);
console.log(isCapital);
2推論された型も厳しくチェックされる
推論は「型チェックが緩くなる」わけではないことを確かめる例です。let visitCount = 0 と書いただけで number 型になり、注釈を書いた場合とまったく同じ厳しさで再代入が検査されます。
let visitCount = 0; // number と推論される
visitCount = 10; // number なので OK
visitCount = visitCount + 5;
console.log(visitCount);
// visitCount = "多数"; // number に string は入れられずエラー
// 注釈がなくても安全性は変わらない
3計算結果の型も推論される
number 同士の計算結果は number と推論されるので、途中の変数に注釈は不要です。小計から税込価格を出すような多段階の計算でも、型は最後まで自動で追跡されます。
const subtotal = 480 * 3; // number と推論
const withTax = subtotal * 1.1; // これも number と推論
console.log(subtotal);
console.log(Math.floor(withTax));
// 推論された number に対して数値メソッドも安全に使える
console.log(withTax.toFixed(1));
4メソッドの戻り値から推論される
変数だけでなく、メソッドの戻り値からも型は推論されます。toFixed は数値ではなく文字列を返すので推論結果も string になる、という「思い込みと違う型」に気づけるのも推論の利点です。
const originalText = "hello world"; // string と推論
const shoutText = originalText.toUpperCase(); // 戻り値から string と推論
console.log(shoutText);
// toFixed は「文字列」を返すので、推論結果も string になる
const ratioLabel = (0.12345).toFixed(2);
console.log(ratioLabel + " という文字列です");
5推論できない場面では注釈を書く
初期値なしで宣言する変数は推論が働かないため、注釈を書くべき場面です。「あとから分岐で値を入れる変数」は実務でもよく現れ、「推論できるところは省略、できないところは明記」の使い分けを体感できます。
const mathScore = 85; // これは推論に任せる
// 初期値なしの宣言は推論が働かないので、注釈を書く
let gradeLabel: string;
if (mathScore >= 80) {
gradeLabel = "A";
} else {
gradeLabel = "B";
}
console.log("成績は " + gradeLabel + " です");