Within a Vue 3 component using the composition API, I am utilizing reactive objects that will be filled asynchronously with data from an external source.
To achieve this, I am utilizing a "nullable" {} object:
import { Ref, ref } from 'vue'
import { Car } from '@mytypes/vehicles'
const car: Ref<Car|{}> = ref({})
fetch('/cars/42').then((result: Car) => {
car.value = result
}
This allows me to display potentially empty data in the template
<h1>{{ car.model }}</h1>
<label>Brand</label> {{ car.brand }}
<label>Engine</label> {{ car.engine }}
<label>Color</label> {{ car.color }}
However, I find this method to be somewhat of a workaround, as each instance requires me to repeatedly declare Car|{} to satisfy Typescript.
I believe there must be a more proper way to handle this scenario, don't you agree?