Mobx-State-Tree — присвоить типу массива

#typescript #mobx #tslint #mobx-react #mobx-state-tree

#typescript #mobx #tslint #mobx-реагировать #mobx-state-tree

Вопрос:

У меня есть эта базовая модель.

 const stuff = types.model({
  term: types.string,
  excludeTerm: types.string,
  stores: types.array(types.string)
}).actions(self => ({
  setTerm(term: string) {
    self.term = term
  },
  setExcludeTerm(term: string) {
    self.excludeTerm = term
  },
  setStores(stores: string[]) {
    self.stores = stores   // <<< the lint error is on this line
  }
}))
 

Я получаю следующую ошибку TS Lint:

Тип ‘string[]’ не может быть присвоен типу ‘IMSTArray<ISimpleType> amp; IStateTreeNode<IArrayType<ISimpleType>>’. В типе ‘string[]’ отсутствуют следующие свойства из типа ‘IMSTArray<ISimpleType>’: spliceWithArray, наблюдать, перехватывать, очищать и еще 4.ts(2322)

Это досадная ошибка. Я могу исправить это, назначив так: (self as any).stores = stores но я хочу прекратить делать хаки в своем коде.

Вопрос в том, почему я получаю эту ошибку? Есть ли другой способ присвоить типу массива в mobx-state-tree?

Я не смог найти в mobx-state-tree более подробную документацию для работы с массивами. Кто-нибудь знает что-нибудь?

Ответ №1:

Решение заключается в использовании приведения:

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

// .....

self.stores = cast(stores)
 

Это связано с тем, что MST позволяет присваивать моментальным снимкам фактические значения и автоматически преобразовывать их. Это относится не только к массивам, но и ко всем типам значений. Однако в typescript нет поддержки для того, чтобы присваивание было более узким, чем то, чему оно присваивается, что является причиной необходимости приведения. cast ничего не делает, но помогает TS выяснить, что это назначение допустимо

Комментарии:

1. Спасибо за этот ответ 😊

Ответ №2:

Вы можете использовать self.stores.replace(stores)

Вот документы для MST, это действительно единственные документы, которые я там видел: https://github.com/mobxjs/mobx-state-tree

Существует также функция setLivelinessCheck('error') , которая очень помогает при локальной отладке, чтобы увидеть ошибки, которые могут возникнуть. Он находится в списке функций обзора API: https://github.com/mobxjs/mobx-state-tree#api-overview

Комментарии:

1. Спасибо. Где я могу найти доступные методы для массивов MST? Есть ли какие-либо документы?

2. Недавно у меня была другая ошибка, когда при вводе нового значения в энергозависимый массив не запускалась реакция на обновление, поэтому я действительно думаю, что некоторые документы были бы полезны.

3. Я обновил свой ответ с помощью документов. Для обновления реакции после изменения в дереве, как вы используете это с вашими компонентами react? Используете ли вы пакеты a Provider и mobx-react observer ?

Ответ №3:

Массив в MST — это не обычный массив, это сложный тип IMSTArray<ISimpleType<string>> , поэтому ошибка TS lint, которую вы получаете, вполне ожидаема. Однако, на мой взгляд, это определенно не оправдано интуитивно (и пугает новичков).

То, как вы решаете эту проблему, не является взломом, но я бы сказал, что это единственный простой способ обойти ее.