Mobx-state-tree: Typescript Examples

[mikecann]

I know @mweststrate mentioned in this issue: https://github.com/mobxjs/mobx/issues that better typescript support will be coming soon but I thought I would just start this issue to track my my definite interest in better typing support 😄

[mquandalle]

So in Typescript, the current createFactory example doesn't work because this implicitly has type any in the methods body. Is anyone aware of a way to write models in Typescript? (I do understand that this project is a work in progress, I'm just curious if someone has found a way, even hacky, to experiment with it in Typescript)

[mweststrate]

Didn't test, but it is possible in typescript to type this by declaring
this:type as first function arg. Not sure if that helps though as the type
van probably not be named? but maybe that construction can be used to
improve internal types

Op di 31 jan. 2017 01:18 schreef Maxime Quandalle <[email protected]

:

So in Typescript, the current createFactory example doesn't work because
this implicitly has type any in the methods body. Is anyone aware of a
way to write models in Typescript? (I do understand that this project is a
work in progress, I'm just curious if someone has found a way, even hacky,
to experiment with it in Typescript)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/9#issuecomment-276235049,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhMQZbrHO6ugUkY9c9MMkSB6IqQ7Vks5rXn3mgaJpZM4LJ33y
.

[mquandalle]

Thank you, I didn't know this "typing this" feature. I haven't found a way to use the types directly defined in the base model but manually creating an interface is working just fine.

[bradenhs]

The following looks like it's scheduled for the May release of typescript and I'm thinking it should help a lot with this issue: https://github.com/Microsoft/TypeScript/pull/14141

[mquandalle]

The TypeScript PR implementing this typing has been merged and is now usable using typescript@next on NPM.

[Bnaya]

With this keyword there are other issues
use this code

import {
  autorun,
  observable,
  reaction,
} from "mobx";
import {
  action,
  createFactory,
  types,
} from "mobx-state-tree";

class ModelSchema {
  public completed = false;
  public id = types.string("");
  public text = types.string("");
  public toggleCompleted = action(function toggleCompleted (this: ModelSchema, completed: boolean) {
    this.completed = completed;
  });
}

// console.log(new ModelSchema());

const sStatic = {
  completed: false,
  id: types.string(""),
  text: types.string(""),
  toggleCompleted: action(function toggleCompleted (this: typeof sStatic, completed: boolean) {
    this.completed = completed;
  }),
};

const schema = new ModelSchema();

const TodoModelTree = createFactory("TodoModel", schema);
const TodoModelTree2 = createFactory("TodoModel2", sStatic);

const t = TodoModelTree();
const t2 = TodoModelTree2();

reaction(() => {
  return t.completed;
}, function cb() {
  console.log('todo is', t.completed)
});

reaction(() => {
  return t2.completed;
}, function cb() {
  console.log('todo2 is', t2.completed)
});


t.toggleCompleted(true);

t2.toggleCompleted(true);

and see the typescript types error that you get

[mattiamanzati]

Hello!

types.string("")

should be instead

types.string

I am not able to test it now, but that should fix an issue. If you want to provide a default, you can use types.withDefault(types.string, "")

Let me know if this solves the issue!

[mquandalle]

I haven't tested with TS 1.3-alpha, but I was previously using type casting like "" as string in my models and it was working just fine. Type checking is done at compile time anyway, so why bother using some runtime constructs like types.string for the sole role of type safety?

[mattiamanzati]

Runtime checking is performed mainly in applySnapshot to ensure that the incoming snapshot is valid! :)

[mweststrate]

closing this one in favor of #66 (feel free to reopen if this one doesn't cover all issues)