Vue can infer the type of your `ref`'s but if you need to represent some more complex types you can do so with generics:

import {ref} from "vue"

interface PersonInfo {

firstName: string,

surname: string,

age: number

}

const people = ref<PersonInfo[]>([])

Alternatively you can use casting with `as`. This should be used if the type is unknown. Consider this example where we create a composition wrapper function around `fetch` and we dont know the data structure that will be returned.

import { ref, Ref } from "vue";

type ApiRequest = () => Promise<void>;

export function useAPI<T>(url: RequestInfo, options?: RequestInit) {

const response = ref() as Ref<T>; // 👈 note we're typing our ref using `as`

const request: ApiRequest = async () => {

const resp = await fetch(url, options);

const data = await resp.json();

response.value = data;

};

return { response, request };

}