Cloning an array of objects in TypeScript

Question

I have an array of objects like below defined in my interface:

myArray: [{
    id: number;
    item: string;
    checked: boolean;
}]

I am trying to clone the array using the below statement:

let newArray = myArray.map(x => Object.assign({},x));

When I am trying to assign a new array to my original array, I am getting the below error:

Type '{ id: number; item: string; checked: boolean; }[]' is not assignable to type
'[{ id: number; item: string; checked: boolean; }]'.
  Target requires 1 element(s) but source may have fewer

It looks like the array of objects is being transformed to an object of array.

myArray is defined as a tuple, not an array, type. You've said it should have exactly one entry. .map makes no such guarantee. Your initial type is probably wrong, or if you do only have one entry you don't need to .map. — jonrsharpe
– jonrsharpe, Commented Sep 21, 2020 at 16:29
Change myArray: [{ id: number; item: string; checked: boolean; }] to myArray: { id: number; item: string; checked: boolean; }[] — Heretic Monkey
– Heretic Monkey, Commented Sep 21, 2020 at 16:33

Peter Mortensen · Accepted Answer · 2022-01-01 12:48:33Z

26

The problem you're having lies in the difference between tuple and list types in TypeScript. Consider the following example Playground link:

type AsTuple = [number];

type AsArray = number[];

let myArrayA: AsArray = [];
let myArrayB: AsTuple = []; // This one errors

Why does the second one error? It's because AsArray is an array of numbers, whereas AsTuple is a tuple where the first (and only) item in the tuple is a number. An empty array doesn't conform to the type AsTuple; it must be a single item array.

In your example, you have:

myArray: [{
    id: number;
    item: string;
    checked: boolean;
}]

It defines myArray as a tuple type - it can have one item, which is an object. You could correct it by making it an an array type:

myArray: {
    id: number;
    item: string;
    checked: boolean;
}[]

You can see an example in this playground link.

edited Jan 1, 2022 at 12:48

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Sep 21, 2020 at 20:07

OliverRadini

6,4941 gold badge26 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cloning an array of objects in TypeScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related