CODEWITHSUNDEEP
typescript
Crocsx
Crocsx

Reputation: 7620

Update to typescript 3.8, made array readonly

I recently update my project from Typescript 3.5 to 3.8. Everything run smoothly expect some operation on array.

    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]'

I do not use readonly anywhere in my app, it looks like all my array are frozen and uneditable.

Why so ? I do not see it in the breaking changes. Is there a way to find in visual code ALL the spot where this problem occur ? cause right now only the error pop at runtime and it's really unsafe to deploy such a version.

EDIT : Someone talk about a similar problem here => Error while sorting array of objects Cannot assign to read only property '2' of object '[object Array]'

but I do not see why simple array are also throwing it without beeing redux stored elements.

Upvotes: 1

Views: 800

Answers (1)

Crocsx
Crocsx

Reputation: 7620

Following @T.J.Crowder comment, I looked into my code and by default, if not typing a selector in NGRX, the returned value is NOT typed readonly.

I went trought all my selector and typed them appropriately for ex.

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 triggered ALL the error in typescript everywhere, and I then fixed them and fixed the project.

Upvotes: 1

Related Questions