CODEWITHSUNDEEP
reactjstypescriptmobxmobx-react
David Casanellas
David Casanellas

Reputation: 855

Mobx Computed with Arguments (computedFn) and TypeScript - what's this?

The following example https://mobx.js.org/refguide/computed-decorator.html raises an error using TypeScript.

// Parameterized computed views:
// Create computed's and store them in a cache
import { observable } from "mobx"
import { computedFn } from "mobx-utils"

class Todos {
  @observable todos = []

  getAllTodosByUser = computedFn(function getAllTodosByUser(userId) {
    return this.todos.filter(todo => todo.user === userId))
  })
}

'this' implicitly has type 'any' because it does not have a type annotation.ts(2683)

An outer value of 'this' is shadowed by this container.

Setting tsconfig's noImplicitThis to false will workaround on this but my intention is to keep noImplicitThis set to true.

Any idea? Thanks!

Upvotes: 2

Views: 2376

Answers (1)

David Casanellas
David Casanellas

Reputation: 855

Injecting this: Todos will fix it. TypeScript will not complain and the this will be correctly typed. Notice that the TS compiler will remove the this parameter when compiling to JavaScript.

// Parameterized computed views:
// Create computed's and store them in a cache
import { observable } from "mobx"
import { computedFn } from "mobx-utils"

class Todos {
  @observable todos: ITodo[] = []

  getAllTodosByUser = computedFn(function getAllTodosByUser(this: Todos, userId: ITodo[]) {
    return this.todos.filter(todo => todo.user === userId))
  })
}

Upvotes: 2

Related Questions