Vue.js 3 What is the correct way to initialize my number variable?

Question

Using Vue 3, I'm getting the following error:

Type 'null' is not assignable to type 'number'.

This is the relevant code:

interface ComponentState {
  heroSelected: number;
}

export default defineComponent({
  name: 'Battle',
  setup() {
    const state: ComponentState = reactive({
      heroSelected: null,

I also tried undefined instead of null. I do not want to initialize my variable heroSelected to 0 or any other numerical value (in which case I don't get any error).

So what can I do to initialize it in a way that doesn't trigger an error?

Answer 1

Your interface should be defined as follows :

interface ComponentState {
  heroSelected: number | null| undefined;
}