Update to the latest version of typescript, implemented a read-only array

Question

Update to the latest version of typescript, implemented a read-only array

After updating my project from Typescript 3.5 to 3.8, everything was running smoothly except for some operations on arrays.

    const usedROI = this.rois.find((roi) => roi.id === roiId);
    usedROI.position.height = position.height;

ERROR TypeError: Cannot assign to read only property 'height' of object '[object Object]'

   let rerouteWaypoint = route.waypoints.filter((wp) => wp.type === IWaypointType.REROUTE_POINT);
   rerouteWaypoint.forEach((wp) => (wp.type = IWaypointType.USER_POINT));

ERROR TypeError: Cannot assign to read only property 'type' of object '[object Array]'

  const wps = state.entities[action.payload.routeId].waypoints;
  const wp = {
    ...wps[index],
    ...action.payload.changes,
  };
  wps[index] = { ...wp }; <= this line breaks

core.js:4117 ERROR TypeError: Cannot assign to read only property '0' of object '[object Array]'

Despite not using readonly anywhere in my app, all my arrays seem to be frozen and uneditable.

Why is this happening? I didn't see it mentioned in the breaking changes. Is there a way to identify all the occurrences of this issue in Visual Studio Code? Right now, errors only appear at runtime, making it unsafe to deploy this version.

EDIT: I found a similar problem discussed here, but I'm puzzled as to why simple arrays are also encountering this issue without being stored in Redux.

typescript

Answer 1

Answer №1

After receiving feedback from @T.J.Crowder, I revisited my code and discovered that without explicitly typing a selector in NGRX, the returned value is not read-only.

I reviewed all my selectors and appropriately typed them as follows:

export const getSelectedProjectId = (state: State): Readonly<number> => state.selectedProjectId;
export const getError = (state: State): Readonly<string> => state.error;
export const getIsLoading = (state: State): Readonly<boolean> => state.isLoading;

export const selectAll: (state: object) => ReadonlyArray<IProject> = featureAdapter.getSelectors(selectProjectState).selectAll;
export const selectAllEntities: (state: object) => Dictionary<IProject> = featureAdapter.getSelectors(
  selectProjectState
).selectEntities;

This led to the discovery of numerous TypeScript errors throughout the codebase, which I promptly addressed, resulting in a successful project fix.

Answer 2

After receiving feedback from @T.J.Crowder, I revisited my code and discovered that without explicitly typing a selector in NGRX, the returned value is not read-only.

I reviewed all my selectors and appropriately typed them as follows:

export const getSelectedProjectId = (state: State): Readonly<number> => state.selectedProjectId;
export const getError = (state: State): Readonly<string> => state.error;
export const getIsLoading = (state: State): Readonly<boolean> => state.isLoading;

export const selectAll: (state: object) => ReadonlyArray<IProject> = featureAdapter.getSelectors(selectProjectState).selectAll;
export const selectAllEntities: (state: object) => Dictionary<IProject> = featureAdapter.getSelectors(
  selectProjectState
).selectEntities;

This led to the discovery of numerous TypeScript errors throughout the codebase, which I promptly addressed, resulting in a successful project fix.

Update to the latest version of typescript, implemented a read-only array

Answer №1

Similar questions

Next.js components do not alter the attributes of the div element

Interfaces are limited to extending an object type or a combination of object types that have statically defined members

What sets apart exporting a component from importing its module in another module?

Developing a JavaScript program for ATMs that can efficiently handle and dispense money in the fewest number of notes possible

Whenever the route changes in Angular, the components are duplicated

Error: Unexpected token 'export' in NextJS Syntax

Using Visual Studio Code, the next app created with nx now supports relative imports

Node OOM Error in Webpack Dev Server due to Material UI Typescript Integration

Disable the yellow curly error lines in Visual Studio Code

Dealing with implicit `any` when looping through keys of nested objects

How to extract data from JSON files using Angular 12

Does manipulating the context before retrieving it within a custom ContextProvider adhere to best practices?

What methods can be used to block direct attribute updates in a JS/TS class?

When a node_module package includes type imports, Next.js can encounter build failures during the linting and type validity checking processes

UI-Router - issue with query parameters preventing arrays with only one item

How can I utilize Angular services to transfer a count value to the Component?

The combination of TypeScript output is not working as expected

Having trouble uploading an image using Angular, encountering an error in the process

What is the best way to incorporate additional properties while utilizing useSession in Next.js with TypeScript?

What could be causing the countdown timer to speed up unexpectedly?