TypeScript中Mobx可观察数组赋值时缺失属性的类型错误问题

Hey there, let's work through this issue step by step!

First, I spotted a syntax error in your code right away: your import statement is placed inside the class, which isn't allowed in TypeScript/JavaScript. Imports must live at the very top of your file, so let's fix that first.

Now, onto the main type error you're seeing: when you assign [] directly to this.queue and other observable arrays, you're replacing a Mobx Observable Array with a plain JavaScript array. Plain arrays don't have Mobx-specific methods like spliceWithArray, clear, or replace—that's exactly why TypeScript is throwing that mismatch error.

Here are two solid solutions to fix this:

Solution 1: Use Mobx Observable Array's built-in clear() method #

This is the cleanest approach, since Mobx's observable arrays come with a clear() method that empties the array while preserving its Observable Array type:

import { observable, action, makeAutoObservable } from "mobx";

class RolloutStoreClass { 
  public queue = observable<IDeploymentProject>([]); 
  public inProcess = observable<IDeploymentProject>([]); 
  public successfull = observable<IDeploymentProject>([]); 
  public failed = observable<IDeploymentProject>([]); 

  constructor() { 
    makeAutoObservable(this); 
  } 

  @action private clearQueue(): void { 
    this.queue.clear();
    this.inProcess.clear();
    this.failed.clear();
    this.successfull.clear();
  } 
} 

export const RolloutStore = new RolloutStoreClass();

Solution 2: Assign a new Observable Array #

If you need to completely replace the array (instead of just emptying it), you'll need to create a new Mobx observable array instead of a plain one:

import { observable, action, makeAutoObservable } from "mobx";

class RolloutStoreClass { 
  public queue = observable<IDeploymentProject>([]); 
  public inProcess = observable<IDeploymentProject>([]); 
  public successfull = observable<IDeploymentProject>([]); 
  public failed = observable<IDeploymentProject>([]); 

  constructor() { 
    makeAutoObservable(this); 
  } 

  @action private clearQueue(): void { 
    this.queue = observable<IDeploymentProject>([]);
    this.inProcess = observable<IDeploymentProject>([]);
    this.failed = observable<IDeploymentProject>([]);
    this.successfull = observable<IDeploymentProject>([]);
  } 
} 

export const RolloutStore = new RolloutStoreClass();

Bonus: Simplify with makeAutoObservable #

Since you're using makeAutoObservable(this), you don't even need to manually wrap your arrays with observable()—Mobx will automatically convert class properties to observables, and methods to actions. This cleans up your code further:

import { makeAutoObservable } from "mobx";

class RolloutStoreClass { 
  public queue: IDeploymentProject[] = []; 
  public inProcess: IDeploymentProject[] = []; 
  public successfull: IDeploymentProject[] = []; 
  public failed: IDeploymentProject[] = []; 

  constructor() { 
    makeAutoObservable(this); 
  } 

  private clearQueue(): void { 
    this.queue.clear();
    this.inProcess.clear();
    this.failed.clear();
    this.successfull.clear();
  } 
} 

export const RolloutStore = new RolloutStoreClass();

内容的提问来源于stack exchange，提问作者Amine Aamer