An array of literal values managed by mobx-state-tree

Can a literal array type be created in MST that is equivalent to

type Interval = ['1min', '5min'];

Here's an example of code that results in an error:

type Interval = '1min' | '5min';

export interface AppStore {
  config: {
    intervals: ['1min', '5min']
  },
  search: {
    symbol: string;
    interval: string;
    dataTypes: string[];
  }
}

const appStore = types
  .model<AppStore>('appStore', {
    config: types.model({
      intervals: types.array(
        types.literal<Interval>('1min'),
        types.literal<Interval>('5min')
      ),
    }),
    search: types.model({
      dataTypes: types.array( types.string ),
      interval: types.union(
        types.literal<Interval>('1min'),
        types.literal<Interval>('5min')
      ),
      symbol: types.string,
    }),
  })

The types.array() method expects to have one argument, so is it even possible? Unfortunately, the MST documentation doesn't provide much clarity on this issue. MST Documentation

Answer №1

Could you provide more details? Are you specifically interested in an array type or a tuple type? For example, would ["1min"] be considered valid, or does it need to be something like ["1min", "5min", "1min"]?

If both options are acceptable, you can use types.array(types.union(types.literal("1min"), types.literal("5min")) - this should work (you were almost there!). Alternatively, you could simplify it with types.array(types.enum(["1min", "5min"]))

However, if you're looking for a tuple type, please note that it hasn't been implemented yet. More information can be found at https://github.com/mobxjs/mobx-state-tree/issues/805

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to connect a boolean to the presence of an attribute in Angular 2?

Can a boolean variable be linked to the presence of an attribute? template: ..., host: { "[attr.disabled]": "disabled" } When rendered in the element, this results in disabled="true" or disabled="false". However, I am looking for a way to utilize i ...

Exporting an Angular 2 component to use in a template

I am interested in creating a custom Tabs component that has the ability to display content from [root] within itself. It functions perfectly when using selectors in html tags (<tab1>), but there are instances where the selector is unknown. Since Tab ...

Is there a way for me to implement a service method that retrieves the onSnapshot result, allowing me to seamlessly integrate it into my Component or Ionic Page?

Currently, I am using "ionic-angular": "3.7.1" along with Firebase Cloud Firestore. My goal is to retrieve all the documents from the Post collection whenever they are updated, deleted, or added. I have been informed that by calling the onSnapshot Method, ...

Angular: ChangeDetection not being triggered for asynchronous processes specifically in versions greater than or equal to Chrome 64

Currently, I'm utilizing the ResizeObserver in Angular to monitor the size of an element. observer = new window.ResizeObserver(entries => { ... someComponent.width = width; }); observer.observe(target); Check out this working example ...

Creating synchronization mechanisms for events in JavaScript/TypeScript through the use of async/await and Promises

I have a complex, lengthy asynchronous process written in TypeScript/JavaScript that spans multiple libraries and functions. Once the data processing is complete, it triggers a function processComplete() to indicate its finish: processComplete(); // Signa ...

Retrieving the returned value from an Observable of any type in Angular Typescript (Firebase)

I am working on retrieving data from my Firebase User List using the following code: currentUserRef: AngularFireList<any> currentUser: Observable<any>; var user = firebase.auth().currentUser; this.currentUserRef = this.af.list('usuarios ...

Is it possible to manually activate a dropdown event using pure JavaScript?

I am attempting to manually trigger a dropdown event using JavaScript. Below is the function where I am trying to achieve this. I have successfully halted the initial event that occurs and now I need to initiate a dropdown event. stopNavigationTriggerDrop ...

What is the best way to include multiple modules in a single TypeScript declaration file?

I've encountered a peculiar issue with Module augmentation. I currently have an agument.d.ts file located in my src folder at <ROOT>/src/augment.d.ts. Within this file, I am defining a module for Webpack's raw-loader and extending the exist ...

Error encountered in azure devops preventing successful execution: "npm ERR! code ELIFECYCLE"

I am facing an issue with my Azure DevOps build pipeline that contains 2 npm tasks: - one for npm install - and the other for npm run-script build Unfortunately, I am encountering errors that do not provide sufficient information about the root cause of ...

An issue has been detected in the jsoneditor component of the ang-jsoneditor module at line 13, character 9

Currently, I am facing an issue with my angular project when running npm start. Strangely enough, the problem only arises after doing a fresh npm install, not when copying over the older node-modules folder. There haven't been any recent changes to my ...

Tips for creating a string format for the value of an HTML attribute

I have set up a datalist with labels in the format: "City name (city code)" <!-- COG municipalities selector --> <input type="text" list="cogMunicipalities" [(ngModel)]="municipality" (click)="selectMunicipalityCode(municipality)"> <datalis ...

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

I've been working on a UI layout that includes checkboxes on the left, a data table on the right, and a drop zone box. The aim is to keep the table data updated whenever a new file is dropped, and also filter the data based on checkbox selection. I ma ...

The TypeScript factory class anticipates an intersection

In my code, I have a class factory called pickSomething that generates a specific type based on a key provided from a ClassMap: class A { keya = "a" as const; } class B { keyb = "b" as const; } type ClassMap = { a: A b: B } c ...

I have attempted numerous methods, but the TypeScript object remains potentially undefined

My current code involves using canvas to capture the cropped image. Below is the function that handles this process: export const getCroppedImg = ( image: HTMLImageElement, crop: Crop, fileName: string ): Promise<Blob> => { let canvas: HTM ...

Declaration of function with extra attributes

Is there a way to define a type for a function that includes additional properties like this? foo({ name: 'john' }) foo.type I tried the following solution, but TypeScript seems to think that foo only returns the function and cannot be called wi ...

"Receiving an error message stating 'Was expecting 1 parameter, received 2' while trying to pass a useState function in TypeScript

I am encountering an issue with a component where I pass a useState setter to a utility function: export interface IData { editable: string[]; favourited: string[]; } const [data, setData] = useState<IData | undefined>(undefined) useEffect(() = ...

Establish a connection between a variable and the selected value of Mat-select using a form

Within my TypeScript code, there exists a variable named type whose value is provided by its parent component. This type value is essentially a string that has the possibility of being empty upon being received from the parent component. Additionally, in t ...

React 18 Fragment expressing concern about an excessive amount of offspring

Recently, I attempted to integrate Storybook into my React application, and it caused a major disruption. Despite restoring from a backup, the absence of the node_modules folder led to issues when trying 'npm install' to recover. Currently, Types ...

What is the best way to pass a form result from a parent component to a child component

In the setup, there is a child component containing a form with various options for selection. The goal is to capture the user's selection and process it within this child component. Despite attempting to utilize an event in the parent component, the ...

Could someone shed some light on why my code within the useEffect hook in my component is being triggered twice when it shouldn't be?

I'm currently developing a VR Web project using Three.js within a React-Vite-Typescript setup. As I begin this new project, my focus is on coding the initial view. It starts with a black screen displaying a white logo at the center, reminiscent of in ...