✅ 6.3 watchの型付けの注意点

■ 要点（結論）

watchの監視対象がrefやcomputedの場合、それに応じた型推論が働くが、型明示しないとエラーや誤検知の元になる。
コールバック引数 (newVal, oldVal) に明確に型を付けることが重要。

■ 型付けの基本構文

watch<T>(
  source: WatchSource<T>,
  callback: (newValue: T, oldValue: T) => void
)

Tは監視対象の型です。
解説

■ 具体例（正しい型付け）

// ファイル名: ParentComponent.vue
<script setup lang="ts">
//refとwatchをインポート
import { ref, watch } from 'vue';

//子コンポーネントをインポート
import ChildComponent from './ChildComponent.vue';

// v-model対象の値（文字列型と明示）
const childValue = ref<string>('初期値');

// childValueが変わったらログ出力
watch<string>(
  childValue,
  (newVal: string, oldVal: string) => {
    console.log('childValue changed from', oldVal, 'to', newVal);
  }
);
</script>

<template>
  <div>
    <ChildComponent v-model="childValue" />
  </div>
</template>

✅ 型付けポイントまとめ

項目	内容
監視対象の型	`ref<string>()`なら`string`型になる
watchの型パラメータ	`<string>`のように明示
コールバック引数の型	`(newVal: string, oldVal: string)` と明記

🎯 重要な注意点

特にオブジェクト (ref<object>) や配列 (ref<Array<any>>) を監視する場合は、型推論ミスを防ぐため必ず型を指定する。
any型に逃げると、Composition APIの型安全性が損なわれるため、極力正しい型を付与する。