prop-function.ts

type PropType = String | Boolean | Number | Object | typeof Array

function prop<T = any>(type: PropType, options: any = {}): T {
  return { type, ...options } as any
}

props-option-1.ts

interface Props {
  user: api.User
  alerts: api.Alert[]
}

export default createComponent({
  name: "UserAlerts",
  props: {
    user: Object,
    alerts: Array,
  } as any as Props,
  setup(props) {
    // Typescript infers typeof 'props' to be `Props`
  },
})

props-option-2.ts

export default createComponent({
  name: "UserAlerts",
  props: {
    user: Object as any as User,
    alerts: Array as any as Alert[],
  },
  setup(props) {
    // Typescript infers typeof 'props' to be:
    // { 
    //   user: User, 
    //   alerts: Alert[], 
    // }
  },
})

props-option-3.ts

import { prop } from 'ts-tricks-hidey-hole'

export default createComponent({
  name: "UserAlerts",
  props: {
    user: prop<User>(Object),
    alerts: prop<Alert[]>(Array),
  },
  setup(props) {
    // Typescript infers typeof 'props' to be:
    // { 
    //   user: User, 
    //   alerts: Alert[], 
    // }
  },
})

props.ts

interface Props {
  user: api.User
  alerts?: api.Alert[]
}

state-component.ts

import { value, createComponent } from 'vue-function-api'

export default createComponent({
  props: /* ... */,
  setup(props) {
    const sort = state({
      field: 'created_at',
      reverse: false,
    })

    function changeSort(field: string, reverse: boolean) {
      sort.field = field
      sort.reverse = reverse
    }

    return { sort, changeSort }
  },
})

the-problem.ts

export default createComponent({
  name: "UserAlerts",
  props: {
    user: Object,
    alerts: Array,
  },
  setup(props) {
    // Typescript automatically infers typeof 'props' to be:
    // { 
    //   user: ObjectConstructor, 
    //   alerts: ArrayConstructor, 
    // }
  },
})

value-component.ts

import { value, createComponent } from 'vue-function-api'

export default createComponent({
  props: /* ... */,
  setup(props) {
    const sortField = value('created_at')
    const reverse = value(false)

    function changeSort(field: string, reverse: boolean) {
      sortField.value = field
      reverse.value = reverse
    }

    return { sortField, reverse, changeSort }
  },
})

watch-1.ts

let name = 'Roger Rabbit'
watch(name, cb) // equal to watch('Roger Rabbit', cb)
name = 'Jessica Rabbit'
// watch is never called, name wasn't cahnged, it was completely reassigned

watch-2.ts

const name = value('Roger Rabbit')
watch(name, cb)
name.value = 'Jessica Rabbit'
// watch IS called because the 'value' property was changed, not the name itself