🟢 2.7 Vue での型付けがなぜ安全なのか？（ref<number>(), defineProps<{ ... }>() の背景）

✅ 【要点】

• Vue 3（Composition API）では TypeScript の型システム をフル活用できる
• ref<number>() → 中に入れる値の型を宣言できる → 型ミスを防げる
• defineProps<{ name: string }>() → 親からもらう props の型を明確にできる
• どこで何を使っているのか、間違った値が入らない設計ができる
• → 型付けで「設計ミス」や「使い方間違い」を事前に防ぐ
• → チーム開発でも「安全・安心」に動くコードにできる

🟠 【普通の JavaScript だと何が起きる？】

const count = 0;     // ← 数値だと思ってた

count.toUpperCase(); // ❌ エラー！数値に toUpperCase はない

🚩 型がないと「何が入るべきか」がわからない → 使い方を間違えても気づかない

🟢 【TypeScript + Vue の ref → 型を固定できる】

import { ref } from 'vue';

const count = ref<number>(0);  // ← 最初から「これは number です」と宣言

count.value += 1;              // OK!
count.value = 'Hello';         // ❌ エラー！ string は入れられない

🎯 「何が入るべきか」を決める → 型ミスを防ぐ。

🟣 【props の型付け → defineProps の例】