Jexordexan

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

Jexordexan

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

Jexordexan

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

Jexordexan

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

Jexordexan

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

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

Jexordexan

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

Jexordexan

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:

Jexordexan

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, 

Jexordexan

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

export default createComponent({
  name: "UserAlerts",
  props: {
    user: Object,
    alerts: Array,

Jexordexan

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

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