Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Typescript Union of Reference & Model#1999

Discussion options

Hi! I have a question about an issue I ran into when I have a union of reference and a model and I try to access an action that they inherited from a Base Model.

To explain it more, I have aBase model that defines an action. ThisBase model is used on other models to inherit the actions thatBase defines. So let's say we have something like below:

codesandbox here:https://codesandbox.io/s/inspiring-snyder-yregis?file=/src/Sample.ts

const Base = types.model('Base', { name: '' }).actions((self) => ({  setName: (name: string) => {    self.name = name;  },}));const Foo = types.compose(  'Foo',  Base,  types.model({    type: 'Foo',  }));const Bar = types.compose(  'Bar',  Base,  types.model({    id: types.identifier,    type: 'Bar',  }));const Tree = types  .model('Tree', {    baz: types.union(types.reference(Bar), Foo),  })  .actions((self) => ({    changeName: () => {      self.baz.setName('foo');    },  }));

When I am accessingself.baz, I know the union ofBar &Foo have the actionsetName, but I am getting a type error where it says that the actionsetName is not defined. When I try to remove types.reference(Bar), the TS issue disappears. However, I need it to be a reference. Is there anything I am missing here? I appreciate any help or tips. Thank you!

You must be logged in to vote

Hey@sethdumaguin - sorry it took so long for folks to get back to you.

I'm not precisely sure what's going on here, but I wonder if this is an issue where TypeScript can't appropriately infer the type from thetypes.reference call. I was able to remove the linting error by making these changes:

import { types } from "mobx-state-tree";const Base = types.model("Base", { name: "" }).actions((self) => ({  setName: (name: string) => {    self.name = name;  }}));const Foo = types.compose(  "Foo",  Base,  types.model({    type: "Foo"  }));const Bar = types.compose(  "Bar",  Base,  types.model({    id: types.identifier,    type: "Bar"  }));const Tree = types  .model("Tr…

Replies: 1 comment 1 reply

Comment options

Hey@sethdumaguin - sorry it took so long for folks to get back to you.

I'm not precisely sure what's going on here, but I wonder if this is an issue where TypeScript can't appropriately infer the type from thetypes.reference call. I was able to remove the linting error by making these changes:

import { types } from "mobx-state-tree";const Base = types.model("Base", { name: "" }).actions((self) => ({  setName: (name: string) => {    self.name = name;  }}));const Foo = types.compose(  "Foo",  Base,  types.model({    type: "Foo"  }));const Bar = types.compose(  "Bar",  Base,  types.model({    id: types.identifier,    type: "Bar"  }));const Tree = types  .model("Tree", {    baz: types.union(types.reference(Bar), Foo) as typeof Bar | typeof Foo  })  .actions((self) => ({    changeName: () => {      self.baz.setName("foo");    }  }));

Here's the code sandbox:https://codesandbox.io/s/mobx-state-tree-todolist-forked-0lwr9n?file=/index.ts

The only change is explicitly usingas, like so:

baz:types.union(types.reference(Bar),Foo)astypeofBar|typeofFoo

I'm not sure if this is the fully correct way to do it, and I definitely don't love having to useas, but I do wonder if there's a limitation on TypeScript inferences, and maybe you just need to help the compiler a little bit here.

Is that helpful? Did you end up finding some other solution since posting this? Would love to get a sense of where you landed on this one.

You must be logged in to vote
1 reply
@coolsoftwaretyler
Comment options

I'm gonna mark this as an answer since we didn't hear back. There are plenty of sharp edges around TS and MST, and we're working to improve that, but I think this is a reasonable workaround.

Answer selected bycoolsoftwaretyler
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Labels
None yet
2 participants
@sethdumaguin@coolsoftwaretyler

[8]ページ先頭

©2009-2025 Movatter.jp