🛡️ 8-1. 型エラーの対処法（TypeScript）

✅ 要点まとめ

• Composition API でよく出る 「型関連のエラー」 とその解決法を整理
• TypeScript の基本的な考え方：「型をはっきりさせるほど安全」
• よくあるエラー →
  1. Property 'xxx' does not exist
  2. Object is possibly 'null'
  3. Argument of type 'xxx' is not assignable to parameter of type 'yyy'
  4. 型定義忘れ（defineProps, defineEmits, useStore）

🟥 よくある型エラーと解決方法

① Property 'xxx' does not exist

// ❌ props に型を書いてない
const props = defineProps();
// props.step が存在しないと言われる
const step = props.step;

✅ 解決：必ず型を書く！

const props = defineProps<{ step?: number }>();
const step = props.step ?? 1;

② Object is possibly 'null'

const myInput = ref<HTMLInputElement | null>(null);

// ❌ エラー: Object is possibly 'null'
myInput.value.focus();

✅ 解決：オプショナルチェーン (?.) を使う

myInput.value?.focus(); // ✅

または、確実に存在する場面なら ! で断言：

myInput.value!.focus(); // ✅（ただし慎重に）

③ Argument of type 'xxx' is not assignable to parameter of type 'yyy'