Wrong types with mobx values() result in Getting started tutorial

[alexamy]

Hi! I'm trying to complete the Getting started tutorial, but got typing error from mobx values.

At the step Getting to the UI we are using values from mobx to iterate through map from store:

// in react component
{values(props.store.todos).map(todo => (
    <div>
        <input type="checkbox" checked={todo.done} onChange={e => todo.toggle()} />
        <input type="text" value={todo.name} onChange={e => todo.setName(e.target.value)} />
    </div>
))}

Store:

// somewhere in store
const Todo = types.model({
  name: '',
  done: false,
})

const Store = types.model({
  todos: types.map(Todo),
});

This code works in the sandbox, but I got the typing error about name property (and possible undefined todo):

I've searched and found an old issue, but there is no typings discussion.
Official playground examples use JS.

What am I doing wrong?

Playground with code from tutorial
Playground with simplified version (in one file)

[EmilTholin]

Hi @alexamy!

You can use the values method on your map to get an iterator object and then create an array from that to retain the type information:

export default function App() {
  return (
    <div className='App'>
      {Array.from(store.todos.values()).map((todo, i) => (
        <p key={i}>{todo.name}</p>
      ))}
    </div>
  );
}

Nice find though, we should consider updating the documentation to retain the type information, even though the example is in plain JavaScript.

[alexamy]

So all utilities from mobx potentially can break typings, and we should not use them?
It looks like MST functionality (actions, etc) and native js methods can cover all use cases of these utilites.

[alexamy]

Btw quote from getting started:

MST loves MobX, and is fully compatible with it's autorun, reaction, observe and other parts of the API.

[EmilTholin]

I have personally not used the MobX values function when working with MST, since maps have that method itself, so I didn't know the type information was not retained.

I agree with the quote though; autorun, reaction, observe still works nicely with MST, even though sometimes pure MST concepts might be a better fit, but not always.