How to declare an optional generic type in an interface?

Question

I have this interface:

export interface AlertInteraction<T> {
  id: AlertId;
  data: T;
  buttonId: AlertButtonId;
}

But there are times where data is not needed. I know I can declare it as data: T but I would like to know if I could something like this:

export interface AlertInteraction<T> {
  id: AlertId;
  data: T;
  buttonId: AlertButtonId;
}

export interface AlertInteraction {
  id: AlertId;
  buttonId: AlertButtonId;
}

So, if I give T then I assume I want to access the data, if no then assume it does not exist. Is it possible?

Answer 1

In order to achieve that we need to use conditional types.

type AlertId = string; // just example type alias
type AlertButtonId = string; // just example type alias
type AlertInteraction<T = undefined> = {
  id: AlertId;
  buttonId: AlertButtonId;
} & (T extends undefined ? {} : {
  data: T;
})


// example usage
// no need for data (T is undefined)
const a: AlertInteraction = {
  id: '1',
  buttonId: '1'
}
// data prop is required 
const b: AlertInteraction<number> = {
  id: '1',
  data: 1,
  buttonId: '1'
}

Most important is this part:

& (T extends undefined ? {} : {
  data: T;
})

We join conditionally or type {} if T is assignable to undefined, or we join {data: T} for other type. In result if we don't set the generic, it is by default undefined and our type constructor computes into:

// For T == undefined
{
  id: AlertId;
  buttonId: AlertButtonId;
} & {}
// what is equal to just:
{
  id: AlertId;
  buttonId: AlertButtonId;
}

For a case where argument(generic) is provided as something different then undefined, then the final type has a form:

// For T != undefined
{
  id: AlertId;
  buttonId: AlertButtonId;
} & { data: T}
// which is equal to
{
  id: AlertId;
  buttonId: AlertButtonId;
  data: T;
}

Where T is type given by argument of type constructor. To also clear the information - Type constructor = any type definition with an generic argument.