typescript interface with a generic object parameter

Question

I have multiple objects in my app. For example:

interface Recipe {  
  title: string,  
  ingredients: []  
  creator: string,  
  // ...  
}

interface Vendor {  
  name: string
  address: Address  
  // ...  
}

The user should have the ability to create objects that can accept any of these interfaces for example:

interface Event<T> {  
  date: Date(),  
  type: T // This should be of type Recipe or Vendor object for example.  
}

What is the proper way to define this?
How would I then find out which object the user passed?

Thank You!

Hi @Agata! I'm not sure, what do you mean "the proper way to define this"? You already defined correctly an Event which can accept a Generic type. Would you like to force type nly to be one of "Recipe" or "Vendor"? — leonardfactory
– leonardfactory, Commented Apr 27, 2020 at 11:58
Yes. I am also not clear on how to identify which object the user passed? — Agata
– Agata, Commented Apr 27, 2020 at 12:03

leonardfactory · Accepted Answer · 2020-04-27 12:26:08Z

1

In order to know which type the user passed, you need to use discriminated unions.

To do so, you should:

Augment the interfaces adding a kind or type, or whatever you like, property in order to discriminate between them:

interface Recipe {  
  type: 'Recipe',
  title: string,  
  ingredients: []  
  creator: string,  
  // ...  
}

interface Vendor {  
  type: 'Vendor',
  name: string
  address: Address  
  // ...  
}

Define an union type including the available objects

type Entity /* or whatever */ = Recipe | Vendor;

Now TS can understand which specific interface is used given the type property

Define the Event given the union type

interface Event<T extends Entity> {  
  date: Date,  
  type: T['type'], // If you need only the type
  object?: T
}

const event: Event<Recipe> = {
  date: Date,
  type: 'recipe',
  object: recipe
}

function <T extends Entity>(event: Event<T>) {
  switch (event.type) {
    // ...
  }
}

edited Apr 27, 2020 at 12:26

answered Apr 27, 2020 at 12:08

leonardfactory

3,5311 gold badge21 silver badges27 bronze badges

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

3 Comments

Agata Over a year ago

Thank you! Where do I declare the type. Can you also give me an example how would I instantiate this interface?

leonardfactory Over a year ago

You can declare the type after the interfaces or just before them, it doesn't matter. I'll update the answer with an Event example.

leonardfactory Over a year ago

You're welcome. If an answer satisfy you, please accept it so other users will know it worked.

Collectives™ on Stack Overflow

typescript interface with a generic object parameter

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest