How to make every object property reactive?

Question

Consider this simplified example:

interface Dog {
  name: string;
  age: number;
}

const puppy: Dog = {
  name: 'Snoop',
  age: 2,
};

I want to create a reactive reference for each property in the puppy object.

The easiest way is to do this:

const puppyName = ref(puppy.name);
const puppyAge = ref(puppy.age);

However, this is quite repetitive, so I'm wondering: is there a more generic and type-safe approach to achieve the same?

Answer 1

Use a builtin function toRefs

interface Dog {
  name: string;
  age: number;
}

const puppy: Dog = {
  name: 'Snoop',
  age: 2,
};

import {toRefs} from 'vue'

const puppyRefs = toRefs(puppy)
// const puppyRefs: ToRefs<Dog>

type Pure<T>={[K in keyof T]: T[K]}
type PuppyRefs = Pure<typeof puppyRefs>
// type PuppyRefs = {
//     name: Ref<string>;
//     age: Ref<number>;
// }