Typescript + Mobx observable([]).remove(...)

[wildeyes]

I am getting a

ERROR in [default] /edit.tsx:80:47
Property 'remove' does not exist on type 'string[]'.

with mobx@2.6.2, webpack with awesome-typescript-loader@2.2.4 and typescript@2.0.8.

[benjamingr]

Can you show a full example I can't reproduce.

[JabX]

This looks weird, since observable() has no signature that returns a vanilla array.

But if you're using it as a decorator (@observable list = []), then it's to be expected since the decorator doesn't change the type of the property, meaning that even if at runtime list is an ObservableArray (which has the remove() method), at compile time it's still going to be considered as an array. In that case, your only option is an explicit annotation.

[mweststrate]

Closing for the lack of a reproduction

[mkozhukharenko]

@mweststrate
this example couses an error

class Todo {
  store: TodoStore
  value: string

  constructor(store: TodoStore, value: string) {
    this.store = store
    this.value = value
  }

  @action destroy() {
    this.store.remove(this)
  }
}

class TodoStore {
  title: string = 'TEST'
  @observable todos: Todo[]

  constructor(title: string) {
    this.title = title
    this.todos = [new Todo(this, 'test')] 
  }

  @action removeTodo(todo: Todo) {
    this.todos.remove(todo) // Property 'remove' does not exist on type 'Todo[]'.
  }
}

but if we set todos to IObservableArray everything works

class TodoStore {
  title: string = 'TEST'
  @observable todos: IObservableArray<Todo>

  constructor(title: string) {
    this.title = title
    this.todos = [new Todo(this, 'test')] as IObservableArray<Todo>
  }

  @action removeTodo(todo: Todo) {
    this.todos.remove(todo)
  }
}

Is it ok to write like this?

[JabX]

Yup that's how you should do it.

But I'd rather do something like this instead:

class TodoStore {
  title: string = 'TEST'
  readonly todos = observable<Todo>([])

  constructor(title: string) {
    this.title = title
    this.todos.push(new Todo(this, 'test'));
  }

  @action removeTodo(todo: Todo) {
    this.todos.remove(todo)
  }
}

This way you have no array annotation and you prevent any array reassignment by marking it readonly (you don't need an @observable decorator if you don't do reassignment). Use ObservableArray.replace() instead if you want to "create" a new array.

[mkozhukharenko]

@JabX it makes sense.
thank you very much!

[ehartford]

This goes against the point of the @observable annotation...
If I annotate an array with @observable, typescript should treat it as ObservableArray.
Is there no way to do this with @types/mobx?

[mweststrate]

@ehartford yes there is since Mobx 3, use

readonly todos = observable.array([])

[JabX]

An annotation cannot change the type of the property (or class, or method) it is applied to, and I believe it to be the case for all the languages I know of.

[ehartford]

@JabX The annotation does, in fact, at runtime, change the type from a native array into an ObservableArray. It's just a question of whether TypeScript is aware of the change and able to provide correct dev-time and compile-time validation. If TypeScript doesn't give us the tools to describe the change, then it's a TypeScript bug. If we can describe it but we aren't, it's bug in the MobX typings.

[JabX]

@ehartford I was talking about compile-time type information, sorry for the inaccuracy. Sure, it does indeed change the type at runtime, which I consider to be a bad practice in general because of the impossibility of describing it at compile-time.

Just don't use the annotation if need the type info, @mweststrate's solution (which is also what I proposed a few posts earlier) is better anyway.

[stiofand]

I cant follow this, I'm getting the same error as given above, and I'm simply observing an array of strings:

...
questionQueue = string[];
...
decorators(MyClass, { questionQueue: observable })

Type error: Argument of type '{ questionQueue: IObservableFactory & IObservableFactories & { enhancer: IEnhancer<any>; }; totalQuestionCount: IActionFactory; updateTotalQuestionCount: IActionFactory; question: IActionFactory; ... 6 more ...; resetProgress: IActionFactory; }' is not assignable to parameter of type '{ prototype?: MethodDecorator | PropertyDecorator | MethodDecorator[] | PropertyDecorator[] | undefined; }'.
  Object literal may only specify known properties, and 'questionQueue' does not exist in type '{ prototype?: MethodDecorator | PropertyDecorator | MethodDecorator[] | PropertyDecorator[] | undefined; }'.  TS2345

    52 | 
    53 | decorate(ObservableQuestionStore, {
  > 54 |     questionQueue: observable,

This is just a number of typescript and MObX issues I'm having, when trying to stick to the docs.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.