
紅茶カップで学ぶ型注釈と推論|第2回 TypeScript入門
著者: 管理者 / 2025-08-20 (更新: 2025-08-20)

先生、第1回では「型とはなにか」を知って、とても安心感を覚えましたの✨
今日はもっと具体的に…「型をどうやって使うのか」を教えていただきたいですわ。
今日はもっと具体的に…「型をどうやって使うのか」を教えていただきたいですわ。

承知しました。では今回は 「型注釈」と「型推論」 について学んでまいりましょう。
紅茶のカップを例にすれば、すぐにイメージできますよ。
紅茶のカップを例にすれば、すぐにイメージできますよ。
📝 解説:型注釈とは?
型注釈 (Type Annotation) は「この変数には〇〇しか入りません」と、先にルールを添えておくことです。
-
例:
-
「このカップは紅茶専用」
-
「このグラスはジュース専用」
-
コードに置き換えるとこうなります:
let tea: string = "アールグレイ";
let sugar: number = 2;
: string
→ 文字列しか入れられません。: number
→ 数値しか入れられません。

まあ!まるで「紅茶カップには紅茶」「砂糖スプーンには砂糖」と決めておくようなものですわね☕🍬
これなら、間違えてスプーンに紅茶を注ぐこともありませんわ。
これなら、間違えてスプーンに紅茶を注ぐこともありませんわ。

おっしゃる通りです。ルールを先に決めることで、使い方を間違えにくくなるのです。
📝 解説:型推論とは?
型推論 (Type Inference) は「わざわざ書かなくても、TypeScriptが自動で判断してくれる」仕組みです。
let cup = "ダージリン"; // string型と判断される
let sugarCube = 3; // number型と判断される
ここでは : string
や : number
と書いていませんが、
TypeScriptは「これは文字列だな」「これは数値だな」と自動的に見抜きます。

まあ、すごいですわ!
まるで執事さんが「この器は紅茶用、この小皿は砂糖用」と察して並べてくださるみたいですのね。✨
まるで執事さんが「この器は紅茶用、この小皿は砂糖用」と察して並べてくださるみたいですのね。✨

素晴らしいたとえです。つまり 型注釈は自分で明示する、型推論はTypeScriptが気を利かせて判断してくれる、という違いです。
📝 解説:どちらを使うべき?
-
型注釈を使うと良い場合
-
他の人に「この変数の役割は〇〇です」と伝えたいとき
-
関数の引数や戻り値をはっきりさせたいとき
-
-
型推論に任せてよい場合
- 変数にすぐ値を入れて、その型が明確なとき
つまり、紅茶カップのラベルは貼るべきところにだけ貼ればよいのです。

では先生、わたくし、どこまでラベルを貼るべきか迷ってしまいますわ…。
全部に「紅茶」「砂糖」「ミルク」と書いたら、なんだか堅苦しくなってしまいそうですし💦
全部に「紅茶」「砂糖」「ミルク」と書いたら、なんだか堅苦しくなってしまいそうですし💦

良い疑問です。基本は 「必要なところだけ注釈し、残りは推論に任せる」 というバランスです。
特に関数の引数と戻り値は明示すると分かりやすくなりますよ。
特に関数の引数と戻り値は明示すると分かりやすくなりますよ。
📝 解説:関数での型指定
例えば「砂糖を何杯入れるか」を決める関数なら:
function addSugar(cups: number): string {
return `${cups}杯の砂糖を加えました`;
}
-
cups: number
→ 引数は数値 -
: string
→ 戻り値は文字列
このように、関数では型注釈がとても役立ちます。

まあ!これなら「砂糖を二杯」と頼んで、急に「レモンを入れました」と返される心配もありませんのね🍋❌

ええ、その通りです。約束を守るからこそ、安心してお茶会ができますね。
✨ 本日のまとめ
-
型注釈:自分で「この変数は〇〇」と明示する
-
型推論:TypeScriptが自動で「これは〇〇だ」と判断してくれる
-
使い分け:重要な部分(特に関数)には注釈、それ以外は推論でOK
-
比喩:紅茶カップにラベルを貼るか、執事に任せるかの違い
☕ 次回予告
次回は「ドレスコードのような型:オブジェクトと配列」。
複数のデータをまとめるとき、どのように型を整えるのかを学んでまいります。👗📦