How to define a common interface in typescript

Question

I want to define a payload with different forms of interface in one function.

Each payload is as follows and I have defined the "UpdatePayload" interface as follows:

/*
ex) payload interface
const interface updateBodyPayload = {
  title: ...
  content: ...
}
*/

/*
ex) payload interface
const interface updateStatePayload = {
  type: ..
  count: ..
}
*/

// Payload Merge interface
export type updatePayload = Partial<updateBodyPayload | updateStatePayload>;

However, the code inside the function produces the following error:

// function.ts
const exec = (body: updatePayload) => {
  const { title, content, type, count } = body;
  // -> property 'title', ... does not exists on type updatePayload
}

What did I make a mistake?

hoangdv · Accepted Answer · 2020-03-06 02:57:36Z

2

If you want to make updatePayload type what is result of merging form updateBodyPayload and updateStatePayload, then it must be like: (& instead of |)

type updatePayload = Partial<updateBodyPayload & updateStatePayload>;

Now updatePayload will be like:

type updatePayload = {
  title?: string;
  content?: string;
  type?: string;
  count?: number;
}

answered Mar 6, 2020 at 2:57

hoangdv

16.3k4 gold badges31 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

How to define a common interface in typescript

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