How to pass extra props to interface base in Typescript?

February 21, 2023

Suppose the following

interface IMessageBase {
    id: number;
}

const handler = ({ id }: IMessageBase): void =>
    console.log('id', id);

How can this interface be modified, so it accepts more properties? I’ve tried the following, but I wasn’t able to get it to work:

interface IMessageBase<T> {
    id: number;
    ...T;
}

const handler = ({ id, name }: IMessageBase<{ name: string; }>): void =>
    console.log('id, name', { id, name });

>Solution :

Make your interface a type intersection !

type IMessageBase<T> = { id: number; } & T

const handler = ({ id, name }: IMessageBase<{ name: string; }>): void =>
  console.log('id, name', { id, name });

Playground