Mobx-State-Tree - Implementing Assignment for Arrays

Question

Mobx-State-Tree - Implementing Assignment for Arrays

I have a simple model that I am working with.

const info = types.model({
  name: types.string,
  age: types.number,
  hobbies: types.array(types.string)
}).actions(self => ({
  setName(name: string) {
    self.name = name
  },
  setAge(age: number) {
    self.age = age
  },
  setHobbies(hobbies: string[]) {
    self.hobbies = hobbies   // <<< the lint error is on this line
  }
}))

When trying to assign an array, I encounter the following TS Lint error:

Type 'string[]' is not assignable to type 'IMSTArray<ISimpleType> & IStateTreeNode<IArrayType<ISimpleType>>'. Type 'string[]' is missing the following properties from type 'IMSTArray<ISimpleType>': spliceWithArray, observe, intercept, clear, and 4 more.ts(2322)

This error is frustrating. Although I can work around it by using (self as any).hobbies = hobbies, I am looking for a cleaner solution to address this issue.

I am wondering why exactly this error occurs and if there is a proper method to assign values to an array type in mobx-state-tree?

I have searched for more detailed documentation on handling arrays in mobx-state-tree but haven't found anything thorough. Does anyone have insights or resources on this topic?

typescript mobx tslint mobx-react mobx-state-tree

Answer 1

Answer №1

To resolve this issue, utilize the cast function:

import { cast } from "mobx-state-tree"

// .....

self.stores = cast(stores)

The reason for using `cast` is that MST allows snapshots to be assigned to real values and automatically converts them. This process applies to all types of values, not just arrays. TypeScript lacks support for assigning a value that is more narrow than the type it is being assigned to, hence the need for `cast`. Although `cast` itself doesn't perform any actions, it helps TypeScript recognize the validity of this assignment.

Answer 2

To resolve this issue, utilize the cast function:

import { cast } from "mobx-state-tree"

// .....

self.stores = cast(stores)

The reason for using `cast` is that MST allows snapshots to be assigned to real values and automatically converts them. This process applies to all types of values, not just arrays. TypeScript lacks support for assigning a value that is more narrow than the type it is being assigned to, hence the need for `cast`. Although `cast` itself doesn't perform any actions, it helps TypeScript recognize the validity of this assignment.

Answer 3

Answer №2

To update the stores, you can utilize the method self.stores.replace(stores)

If you're looking for documentation on MST, check out the following link which seems to be the most comprehensive: https://github.com/mobxjs/mobx-state-tree

For easier debugging locally, you can use the function setLivelinessCheck('error'). This function can help catch and display errors effectively. It is listed under the API Overview functions: https://github.com/mobxjs/mobx-state-tree#api-overview

Answer 4

To update the stores, you can utilize the method self.stores.replace(stores)

If you're looking for documentation on MST, check out the following link which seems to be the most comprehensive: https://github.com/mobxjs/mobx-state-tree

For easier debugging locally, you can use the function setLivelinessCheck('error'). This function can help catch and display errors effectively. It is listed under the API Overview functions: https://github.com/mobxjs/mobx-state-tree#api-overview

Answer 5

Answer №3

The data structure used for arrays in MST is not your typical array; it's actually a complex type -

IMSTArray<ISimpleType<string>>

. Therefore, the TypeScript lint error you received should come as no surprise. However, I must admit that it can be quite daunting for newcomers.

Your solution to this issue may seem like a workaround, but in reality, it is the simplest way to deal with it.

Answer 6

The data structure used for arrays in MST is not your typical array; it's actually a complex type -

IMSTArray<ISimpleType<string>>

. Therefore, the TypeScript lint error you received should come as no surprise. However, I must admit that it can be quite daunting for newcomers.

Your solution to this issue may seem like a workaround, but in reality, it is the simplest way to deal with it.

Mobx-State-Tree - Implementing Assignment for Arrays

Answer №1

Answer №2

Answer №3

Similar questions

The SpinButton object has an undefined public property called 'value' and the public method 'focus()' is not available

Encountered an issue while trying to install the package '@angular/cli'

Is it possible to efficiently structure intricate JSON data onto interfaces in TypeScript with the incorporation of observables?

Strategies for implementing recursive component calling while maintaining nested level monitoring in React Native

What is the best approach to manage the package versions of react, react-dom, @types/react, and @types/react-dom?

Having trouble with the service connection in Stackblitz?

Error in Angular 8 Pipe: Variable remains undefined outside of Subscription

Determining the data type of a generic variable within an Angular component

How to create an array of objects in TypeScript

Navigating through a large array list that contains both arrays and objects in Typescript:

Jest ran into a surprising token related to NUXT typescript

Choose does not showcase the updated value

Efficient method for iterating through three arrays that have matching values and satisfy specified conditions in TypeScript

Error overload in the nest.js build process

Typescript i18next does not meet the requirement of 'string | TemplateStringsArray NextJS'

Tips for retrieving keys of a specific type from an object

Why are nested RxJS map operators used and how do they impact data transformation?

The Next.js API has a mysterious parameter that remains undefined

Building an observable TypeScript class with RXJS: A step-by-step guide

Can a concept like "A Rectangle can be a Square but a Square cannot be a Rectangle" be formulated?