Custom Prop that is Optional

[mashaalmemon]

From a typing perspective I'm trying to setup an optional custom prop. Here I have a custom prop which takes Moment and stores the date value as a number:

/**
 * Function which facilitates a property transform from Moment to number for
 * storage in the snapshot, for mobx-keystone.
 */
const momentToNumberTransform: ModelPropTransform<number, Moment> = {
  /**
   * Take snapshot value, and get Moment.
   *
   * @param originalValue
   * @param cachedTransformedValue
   * @param setOriginalValue
   */
  transform({
    originalValue,
    cachedTransformedValue,
    setOriginalValue
  }: any): Moment {
    return (
      cachedTransformedValue ??
      TimeDateHelpers.getUnixTimestampAsMoment(originalValue)
    );
  },

  /**
   * Take Moment, and return the immutable/serializable value
   *
   * @param transformedValue
   * @param cacheTransformedValue
   */
  untransform({ transformedValue, cacheTransformedValue }: any): number {
    // if no moment has been cached, cache it for the future
    if (isMoment(transformedValue) === false) {
      cacheTransformedValue();
    }
    // return the immutable/serializable value from the Moment
    return TimeDateHelpers.getMomentAsUnixTimestamp(transformedValue);
  }
};

/**
 * Prop type to use when using a moment
 */
export const momentProp
> = prop<number>().withTransform(momentToNumberTransform).withSetter();

I've tried to setup something similar where Moment is optional, but I can't get an optional custom prop to work. My transform has a basic signature like this:

const momentToNumberOptionalTransform: ModelPropTransform<number|undefined, Moment|undefined> = {
...
}

The prop would be setup like so if optional:

/**
 * Prop type to use when using a moment
 */
export const momentProp = prop<number | undefined>()
  .withTransform(momentToNumberOptionalTransform)
  .withSetter();

However, I get this typing error: TS2345: Argument of type 'ModelPropTransform<number | undefined, Moment | undefined>' is not assignable to parameter of type 'ModelPropTransform<number, Moment | undefined>'.   Type 'number | undefined' is not assignable to type 'number'.     Type 'undefined' is not assignable to type 'number'.

Any guidance you can give would be helpful.

[xaviergonz]

null and undefined are handled by default in all transforms, so you don't need to write code for those. if you want a default value just provide one as parameter to prop / tProp (in this case a number) as you would if your prop would be a plain number with a default

[mashaalmemon]

I see. In the https://mobx-keystone.js.org/classModels section of the docs it says:

// in this case we don't use runtime type checking
  text: prop<string>(), // a required string
  done: prop(false), // an optional boolean that will default to false when the input is null or undefined
  // if you want to make a property truly optional then use x: prop<TYPE | undefined>()

Are you saying for truly custom props I shouldn't use the x: prop<TYPE | undefined>() approach?

In my case, I actually didn't want a default value, but instead to allow the customProp to be truly optional. This would equate to::

export const momentProp = prop<number | undefined>()
  .withTransform(momentToNumberOptionalTransform)
  .withSetter();

which is giving me the error. I can of course // @ts-ignore lines but would prefer not to! There may be a typing fix needed on custom properties to allow this.

[xaviergonz]

what I mean is do not take into account undefined or null in your custom trabsformer, they are already handled for you. just add undefined to the prop type and your (non optional) custom transformer will handle undefined

[xaviergonz]

in other words,

export const momentProp = prop<number | undefined>()
  .withTransform(momentToNumberTransform)
  .withSetter();

where the transform is oblivious to null and undefined should work