(TS) Spread types may only be created from object types

Question

I have been implementing Aurelia-DragNDrop. However, its written in Javascript as are the docs and examples and I am working in Typescript.

In the course of implementing the examples I have come across the above error. I therefore researched the spread operator on SO and found this. It recommended using "...(xxx as object)" however my variable is already typed as an array from what I can gather. Other answers were not clear or React orientated - I even tried the Typescript playground with no success.

The code:

@computedFrom('items', 'intention')
get patchedItems() {
    const { items, intention } = this;
    if (!intention) return items;

    let patched = _.reject(items, { id: intention.id });
    const item = _.find(this.items, { id: intention.id });

    if (item) {
        // always show current moving item on top
        patched.push({ ...item, x: intention.x, y: intention.y });
    }

    return patched;
}

Items have been declared at the top of the class as:

@bindable items = [
    { id: 'a', name: 'A', x: 20, y: 20 },
    { id: 'b', name: 'B', x: 50, y: 200 },
    { id: 'c', name: 'C', x: 200, y: 100 }
];

There was also chatter about the fact that this was going to be addressed in 3 etc.. I am on Typescript 3.4.

Here is a picture of the error:

How can I write this so the compiler doesnt complain?

score 0 · Answer 1 · answered Mar 20 '20 at 08:43

I think the problem isn't the spread operator but that you're using underscore's method wrong, therefore getting something unexpected. For reject, you have to pass a function not an object, like this:

const patched = _.reject(items, (i) => i.id === intention.id)

Then the same for find or you can use findWhere instead:

const item = _.find(this.items, (i) => i.id === intention.id)
// or
const item = _.findWhere(items, { id: itention.id })

(TS) Spread types may only be created from object types

1 Answers1