Typescript interface extending and conversion

Question

I've been trying to implement an extended interface with fields that are inserted after fetching data from the API.

My interfaces:

Blocks.d.ts
export interface InputsEntity {
    features: Features;
    commitment: string;
}

SingleBlock.d.ts
export interface Inputs extends InputsEntity {
    group: string;
    size: number;
    color: string;
}

In my react side:

const inputsData: Inputs[] = inputs.map((i:InputsEntity) => {
        i.size = inputs.length;
        i.color = '#F97C0C';
        return i as Inputs
    });

An error is coming up: Property 'size' does not exist on type 'InputsEntity'.

I'm guessing I'm not mapping this properly, any help or direction will be appreciated!

Narro · Accepted Answer · 2020-06-16 09:52:17Z

2

const inputsData: Inputs[] = inputs.map((i:InputsEntity) => {
        const temp: Inputs = {
          size: inputs.length,
          color: '#F97C0C',
          ...i
        };
        return temp;
    });

type InputsEntity is not compatible with Inputs because it lacks of property size, group and color. but you can return a new Inputs type value.

answered Jun 16, 2020 at 9:52

Narro

4405 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Typescript interface extending and conversion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related