typescript - Can't create a Vue ref with a possibly null type

Question

In Vue v3, I want to create a ref with a type that is possibly null. In my app, it represents data that starts out null until it finishes loading.

As a contrived example:

const firstRef: Ref<{ key: number } | null> = ref(null);

// This should give an error because firstRef.value might be null, but it only errors at runtime
const sum: number = firstRef.value.key + 1;

Whenever I hover over the type of firstRef in VSCode, it always shows the type as Ref<{ key: number }> without the | null. Am I doing something wrong? Or is it impossible to create a possibly-null ref for some reason?

question from:https://stackoverflow.com/questions/66055168/cant-create-a-vue-ref-with-a-possibly-null-type

Answer 1

Turns out the problem was unrelated to Vue. The issue was not having "strict": true set in my compilerOptions in tsconfig.json.