vue3+ts+setup, props writing method

When switching from js to ts, I suddenly don’t know how to write the setup. Various errors are reported. Please record them.

Writing method one

import defaultImg from '@/assets/images/defaultImg.png'

const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: 'picture'
  },
  defaultImg: {
    type: String,
    default: defaultImg
  }
})

Writing method two

import { reactive } from 'vue'
import defaultImg from '@/assets/images/defaultImg.png'

interface DataProps {
  src: string
  title: string
  defaultImg: string
}
const props: DataProps = reactive({
  src: '',
  title: 'Picture',
  defaultImg
})

Usage

<template>
  <img :src="props.src" :title="props.title" @error="imgError"/>
</template>

 Complete example two:

<template>
  <van-icon
    class="iconfont"
    class-prefix='icon'
    :name='props.name'
    :dot='props.dot'
    :badge='props.badge'
    :color='props.color'
    :size='props.size'
    :class='props.className'
    @click="emit('click')" />
</template>
<script setup lang="ts">
import { reactive } from 'vue'
interface DataProps {
  name: string
  dot: boolean
  badge: number | string
  color: string
  size: number | string
  className: string
}
const props: DataProps = reactive({
  name: '',
  dot: false,
  badge: null,
  color: 'inherit',
  size: 'inherit',
  className: ''
})
</script>