How to use Typescript on runtimeModel in contextStore?

[Karmalakas]

I can't figure out how to properly define type for runtimeModel. Currently I just use // @ts-ignore, which is not ideal.

type RuntimeModel = {
    myProp: string,
}

export const MyContextStore = createContextStore<RuntimeModel>((runtimeModel)=> ({
    // @ts-ignore
    myProp: runtimeModel.myProp,
}))

My main concern is the undefined part in runtimeModel: RuntimeModel | undefined. But I'm defining it right there. How do I get around this?

Any advice? Whatever I try I get some errors 😞

[jmyrland]

The runtimeModel argument is RuntimeModel | undefined because it's not guaranteed to be set. In other words, the runtimeModel property on the MyContextStore.Provider is optional, so it has to be defined as RuntimeModel | undefined.

Instead of using @ts-ignore, you have some options:

1. If the runtime model is not always provided, you can use the nullish coalescing operator to provide a fallback value

export const MyContextStore = createContextStore<RuntimeModel>((runtimeModel)=> ({
 myProp: runtimeModel?.myProp ?? 'fallback',
}))

2. If the runtime model is always provided, you can use the non-null assertion operator to provide a fallback value:

export const MyContextStore = createContextStore<RuntimeModel>((runtimeModel)=> ({
  myProp: runtimeModel!.myProp,
}))

3. If you don't want to rely on the non-null assertions, you can add a guard to require the runtime model:

export const MyContextStore = createContextStore<RuntimeModel>((runtimeModel)=> {
  if(runtimeModel === undefined) {
    throw new Error("runtimeModel is required");
  }
  return {
    //         👇 not undefined anymore 
    myProp: runtimeModel.myProp,
  }
})

Hope that helps 👍

[Karmalakas]

First option works well 🙂 Thanks again 🙏

[Karmalakas]

OK, so I ended up using the third option after all. Seems to me it's most correct one :)