6日目のゴールと今日やること
6日目のテーマは
「関数にも“型の安心感”を広げて、アプリの動きを型で守れるようになる」
ことです。
ここまでであなたは、
変数・オブジェクト・配列・ユニオン型・オプショナル型など、
“データの型”を扱う基礎をしっかり身につけてきました。
6日目は、いよいよ
「関数の型」
「コールバックの型」
「イベント処理の型」
といった、“アプリの動き”に関する型を扱います。
JavaScript では動くけれど、
TypeScript では「危ないよ」と止めてくれる部分が一気に増えるので、
今日の内容はアプリ開発の安全性を大きく引き上げます。
関数に型を付けると“動き”が安全になる
まずは型なしの関数（JavaScript 的）
function add(a, b) {
return a + b;
}
これだと、
a と b が何なのか、
戻り値が何なのか、
すべて“書いた人の気持ち”に依存します。
TypeScript で型を付ける
function add(a: number, b: number): number {
return a + b;
}
ここで TypeScript はこう理解します。
a は number
b も number
戻り値も number
深掘りポイント：関数の型は「入口と出口の約束」
関数の型は
「何を受け取って、何を返すか」
を明確にするためのものです。
入口（引数）
出口（戻り値）
この 2 つが決まるだけで、
関数の安全性が一気に上がります。
コールバック関数にも型を付ける
コールバックとは？
「関数に渡す関数」のことです。
例として、配列の forEach を自作してみます。
型なしのコールバック
function forEach(arr, callback) {
for (const item of arr) {
callback(item);
}
}
これだと callback の型が不明で危険です。
型ありのコールバック
function forEach(
arr: number[],
callback: (value: number) => void
): void {
for (const item of arr) {
callback(item);
}
}
ここで TypeScript はこう理解します。
arr は number[]
callback は「number を受け取って何も返さない関数」
深掘りポイント：コールバックの型は“関数の中の関数”を守る
コールバックの型を付けると、
- callback に変な値を渡せない
- callback の中で value の型が保証される
- 補完が効くので書きやすい
というメリットがあります。
イベント処理に型を付ける（超重要）
HTML 側を想定
<button id="btn">クリック</button>
型なしのイベント処理（JavaScript 的）
document.getElementById("btn").addEventListener("click", (e) => {
console.log(e.target.value);
});
ここで問題なのは、
e.target が何なのか TypeScript がわからないこと。
型ありのイベント処理
const btn = document.getElementById("btn") as HTMLButtonElement;
btn.addEventListener("click", (event: MouseEvent) => {
console.log("clicked");
});
深掘りポイント：イベントの型は“ブラウザの動き”を理解させる
event: MouseEvent と書くことで、
- event.clientX
- event.clientY
- event.button
などのプロパティが補完されます。
逆に、存在しないプロパティを呼ぶとエラーになります。
event.foo // エラー
JavaScript では気づけないミスを、
TypeScript はその場で止めてくれます。
6日目のミニアプリ：簡単な「クリックカウンター」を作る
HTML を想定
<button id="plus">＋</button>
<div id="display"></div>
状態の型
type CounterState = {
count: number;
};
初期状態
let state: CounterState = {
count: 0
};
表示を更新する関数（型あり）
function render(): void {
display.textContent = `Count: ${state.count}`;
}
イベント処理（型あり）
plusButton.addEventListener("click", (event: MouseEvent) => {
state.count += 1;
render();
});
深掘りポイント：関数 × イベント × 状態 が型で守られる
- state.count は number
- render は void
- event は MouseEvent
- plusButton は HTMLButtonElement
すべての“動き”に型が付いているので、
アプリが壊れにくくなります。
あえて間違えて「型のありがたさ」を再確認する
わざと count を文字列にしてみる
state.count = "10"; // エラー
TypeScript はこう言います。
“count は number だよ？
文字列は危ないよ？”
JavaScript なら普通に動いてしまい、
あとで「足し算したら変な結果になった…」というバグになります。
TypeScript は
「未来の自分を守るための安全装置」
だということが、ここでも実感できます。
6日目のまとめ
今日あなたがやったことを整理するとこうです。
関数の型で「入口と出口の約束」を作った。
コールバック関数に型を付けて“関数の中の関数”を守った。
イベント処理に型を付けて、ブラウザの動きを安全に扱えるようになった。
クリックカウンターのミニアプリで、関数 × 状態 × イベントを型で守った。
わざと間違えて、TypeScript のエラーが「守ってくれている」感覚を再確認した。
今日いちばん深く理解してほしいこと
6日目の本質は、
「TypeScript の型は“データ”だけでなく、“動き”も守ってくれる」
ということです。
関数
コールバック
イベント
状態更新
これらはアプリの“動き”そのものです。
そして、
動きに型を付けると、アプリは壊れにくくなる
ということを、今日は体験しました。
7日目では、
「型の総まとめ」＋「小さなアプリを完成させる」
という仕上げに入ります。
