Need an advice on string-to-number conversion in forms

[OnkelTem]

Hi!

I have an input like <input type=number/> which submits number as string. However, in the model I have types.number and it doesn't accept strings with the "No type is applicable for the union" error.

Is there a way to solve this on the model-level automatically (transparently) like casting?

I wouldn't like to make an action for every such case, especially because it would prevent me from updating entities the easy way as it was recommended here:

applySnapshot(this.selectedProduct, { ...getSnapshot(this.selectedProduct), ...rest });

[thegedge]

Is there a way to solve this on the model-level automatically (transparently) like casting?

There's a few ways to accomplish this:

1. Cast yourself before, like { ...getSnapshot(this.selectedProduct), ...rest, property: Number(rest.property) }.
2. Use types.custom
3. Use snapshot processors to do the casting, although I just saw there's a linked bug where this doesn't work with applySnapshot. I think you could get around that by switching to this.selectedProduct = Model.create({ ...getSnapshot(this.selectedProduct), ...rest }), assuming no references to this.selectedProduct are being maintained elsewhere.

(1) would be my recommendation, unless you're going to have a lot of different places that are passing in strings.

[OnkelTem]

The problem with the first approach is that I cannot therefor use a wrong type inside the parameter of the update() action:

export const productModel = types
  .model('Product', {
    id: types.identifier,
    name: nameType,
    property: types.maybe(types.number),
  })
  .actions((self) => ({
    update(data: ProductIn) {
      const { id: _, ...rest } = data
      applySnapshot(self, { ...getSnapshot(self), ...rest, property: Number(rest.property) })
    },
  }))
export type ProductIn = SnapshotIn<typeof productModel>

Here data is of the ProductIn type, inferred from the model, and hence its property's type cannot be string.

I'll try to dig in the direction of types.custom.

[OnkelTem]

First shot:

import { types, Instance, SnapshotIn, SnapshotOut } from "mobx-state-tree";

const Numerish = types.custom<string, number>({
  name: "Numerish",
  fromSnapshot(value: string) {
    return Number(value);
  },
  toSnapshot(value: number) {
    return value.toString();
  },
  isTargetType(value: string): boolean {
    return typeof value === "number";
  },
  getValidationMessage(value: string): string {
    if (value === "") return "";
    if (Number.isNaN(Number(value)))
      return `'${value}' doesn't look like a number`;
    return "";
  },
});

export const productModel = types.model("Product", {
  name: types.string,
  prop: Numerish,
});
export type Product = Instance<typeof productModel>;
export type ProductIn = SnapshotIn<typeof productModel>;
//            ^?
export type ProductOut = SnapshotOut<typeof productModel>;
//            ^?

Sandbox

However I'm having an issue with the ProductIn/ProductOut types now:

• ProductIn has prop of string | number
• ProductOut has prop of string

I expected at least one of them should be just number, no?

[thegedge]

So the generic parameters are:

You have two:

1. S, the snapshot type, used for both inputs and outputs; and
2. T, the "instance" type.

For a custom type C, you'll have the following:

• SnapshotIn<C> == S | T
• Instance<C> == T
• SnapshotOut<C> == S

In other words, S is the same on the way in as it is on the way out. Product["prop"] should just be number, I believe.