Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

Question

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

I have an object called 'task' in my code:

const task = ref<Task>({
  name: '',
  description: '',
  type: undefined,
  level: 'tactic',
  participants: undefined,
  stages: undefined,
});

export interface Task extends CommonEntity {
  description?: string;
  type?: TaskType;
  level?: EntityLevel;
  participants?: number;
  stages?: TaskTypeStage[];
  questions?: TaskQuestion[];
  materials?: TaskMaterial[];
  indicators?: TaskIndicator[];
  duration?: number;
  images?: [];
  program_id?: number;
  roles?: TaskRole[];
  tables?: TaskTable[];
  competences?: TaskCompetence[];
  task_type_id?: number;
}

export interface CommonEntity {
  id?: number;
  name?: string;
  created_at?: string;
  updated_at?: string;
  errors?: ApiErrors;
  delete?: boolean;
  isTemporaryIdAdded?: boolean;
}

In a method, I need to modify the task object.

function handleSubmit() {
    task.value.materials = removeTemporaryIdFromArray<TaskMaterial>(task.value.materials);

    task.value.questions = removeTemporaryIdFromArray<TaskQuestion>(task.value.questions);

    task.value.roles = removeTemporaryIdFromArray<TaskRole>(task.value.roles);

    task.value.tables = removeTemporaryIdFromArray<TaskTable>(task.value.tables);
}

export function removeTemporaryIdFromArray<T>(
  entity: TaskMaterial[] | TaskQuestion[] | TaskRole[] | TaskTable[] | undefined
) {
  if (entity) {
    return entity
      .filter((item) => !item.delete || !item.isTemporaryIdAdded)
      .map((item) => Object.assign({}, removeTemporaryId<T>(item)));
  }
}

export function removeTemporaryId<T>(item: CommonEntity): T {
  const { id, isTemporaryIdAdded, ...rest } = item;

  return isTemporaryIdAdded ? (rest as T) : { id, ...(rest as T) };
}

I am looking for a way to optimize the handleSubmit function without repeating the same code for each key. How can I improve this?

I tried using a forEach loop with an array of keys, but the value returned is always 'undefined'. Can you suggest a better approach?

(['materials', 'questions', 'roles', 'tables'] as (keyof typeof task.value)[]).forEach((key) => {
      task.value[key] = removeTemporaryIdFromArray<typeof key>(task.value[key] as TaskMaterial[]) as undefined;
    });

I'm aware that my current solution is not ideal. Do you have any recommendations on how to improve it?

javascript typescript vue.js vuejs3 vue-reactivity

Answer 1

Answer №1

I believe the pretension is inappropriate

task.value[key] = removeTemporaryIdFromArray<typeof key>(task.value[key] as TaskMaterial[]) as undefined;

due to the fact that removeTemporaryIdFromArray cannot determine between multiple types (TaskMaterial[] | TaskQuestion[] | TaskRole[] | TaskTable[] | undefined) when setting task.value[key].

I suggest using removeTemporaryIdFromArray_InPlace instead.

Below is my suggestion (it might be a bit verbose), and testing it without context can be challenging. However, TypeScript validates it.

// helper type
type Writable<T> = { -readonly [K in keyof T]: T[K] };
// properties to iterate over
const KeyNames = ["materials", "questions", "roles", "tables"] as const;
// type helper with only the 'good' keys, never undefined (but we do not care.)
type SubPropertyTask = Required<Pick<Task, typeof KeyNames[number]>>;
// transforming the properties into an array of keys for easy iteration
const WriteableKeyNames = KeyNames as Writable<typeof KeyNames> as Array<keyof SubPropertyTask>;

// new submission function
function handleSubmitV3() {
    // iterating over keys
    WriteableKeyNames.forEach((key: keyof SubPropertyTask) => {
        // calling the somewhat non-trivial function
        // < type of first element of the array (because we know its array)
        // also need to specify the type of the key, which cannot be inferred.
        removeTemporaryIdFromArrayInplace<SubPropertyTask[typeof key][0], typeof key>(task[key], key);
    });
}
// T might be written like this : T extends TaskQuestion | TaskMaterial | TaskRole | TaskTable
// but if you need to add other property, name should be enougth
export const removeTemporaryIdFromArrayInplace = <T, E extends keyof SubPropertyTask>(entity: Array<T> | undefined, e: E): void => {
    // custom filtering
    const filteredEntity = entity?.filter((taskObject: T) => taskObject);

    // assigning the new value, with the necessary cast
    // Because at this time typeof task[e] is same as T and as  SubPropertyTask[E] | undefined
    // ... I think.
    task[e] = filteredEntity as SubPropertyTask[E] | undefined;
};

Answer 2

I believe the pretension is inappropriate

task.value[key] = removeTemporaryIdFromArray<typeof key>(task.value[key] as TaskMaterial[]) as undefined;

due to the fact that removeTemporaryIdFromArray cannot determine between multiple types (TaskMaterial[] | TaskQuestion[] | TaskRole[] | TaskTable[] | undefined) when setting task.value[key].

I suggest using removeTemporaryIdFromArray_InPlace instead.

Below is my suggestion (it might be a bit verbose), and testing it without context can be challenging. However, TypeScript validates it.

// helper type
type Writable<T> = { -readonly [K in keyof T]: T[K] };
// properties to iterate over
const KeyNames = ["materials", "questions", "roles", "tables"] as const;
// type helper with only the 'good' keys, never undefined (but we do not care.)
type SubPropertyTask = Required<Pick<Task, typeof KeyNames[number]>>;
// transforming the properties into an array of keys for easy iteration
const WriteableKeyNames = KeyNames as Writable<typeof KeyNames> as Array<keyof SubPropertyTask>;

// new submission function
function handleSubmitV3() {
    // iterating over keys
    WriteableKeyNames.forEach((key: keyof SubPropertyTask) => {
        // calling the somewhat non-trivial function
        // < type of first element of the array (because we know its array)
        // also need to specify the type of the key, which cannot be inferred.
        removeTemporaryIdFromArrayInplace<SubPropertyTask[typeof key][0], typeof key>(task[key], key);
    });
}
// T might be written like this : T extends TaskQuestion | TaskMaterial | TaskRole | TaskTable
// but if you need to add other property, name should be enougth
export const removeTemporaryIdFromArrayInplace = <T, E extends keyof SubPropertyTask>(entity: Array<T> | undefined, e: E): void => {
    // custom filtering
    const filteredEntity = entity?.filter((taskObject: T) => taskObject);

    // assigning the new value, with the necessary cast
    // Because at this time typeof task[e] is same as T and as  SubPropertyTask[E] | undefined
    // ... I think.
    task[e] = filteredEntity as SubPropertyTask[E] | undefined;
};

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

Answer №1

Similar questions

Leveraging Selenium to dismiss a browser pop-up

Distinguishing between resolving a promise in a service/factory as opposed to in a controller within AngularJS

ngModel is not taken into account when processing form data

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

Instructions on how to dynamically update a form field based on the input in another field using conditional statements

The combination of Array.pop and Array.indexOf is not functioning as expected

The request does not include the cookies

Determining the state update value in useEffect using dispatch and payload in Redux

pausing a timer using JavaScript or jQuery

Modify the hyperlink address in the body of the webpage using jQuery

Using JavaScript to Generate Formatting Tags Based on User Selections from a Multiselect Dropdown

Reduce the number of divs on a webpage while incorporating animated transitions

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

Retrieve the stylesheet based on the presence of a specific class

Efficiently loading components in Angular using browserify with lazy loading

Unable to perform Undo function in monaco editor

Utilizing Angular 2 for a dynamic Google Map experience with numerous markers

Is there a way to transfer PHP user information (session) to a Node.js server?

Custom sparkline array

Ensure that only a single onmouseover event is triggered when hovering over multiple elements