In a composition API Vue 3 component, I'm using reactive objects that'll be populated asynchronously with external data.
I'm using "nullable" {} object for that purpose:
import { Ref, ref } from 'vue'
import { Car } from '@mytypes/vehicules'
const car: Ref<Car|{}> = ref({})
fetch('/cars/42').then((result: Car) => {
car.value = result
}
这样我就可以在模板上显示可能为空的数据
<h1>{{ car.model }}</h1>
<label>Brand</label> {{ car.brand }}
<label>Engine</label> {{ car.engine }}
<label>Color</label> {{ car.color }}
这在我看来就像是一个肮脏的黑客，每次我这样做时，我都面临着一个问题，我需要在每个值传播的地方链接声明Car|{}，以保持TypeScrip足够满意.
我想有一种非常合适的方法来做到这一点，不是吗？