Typescript array of objects that has a type extending from the same interface

I have an array that can store objects that extend ISlide

interface ISlide {
    component: ComponentType;
}

interface ITitleSlide extends ISlide {
    title: string;
    subtitle: string;
}

interface IHeaderSlide extends ISlide {
    header: string;
}

const slides: (ITitleSlide | IHeaderSlide)[] = [
    {
        component: TitleSlide,
        title: 'Title',
        subtitle: 'Subtitle'
    },
    {
        component: HeaderSlide,
        header: 'Header'
    }
]

I have this code right now and I would like to add more interfaces that extend ISlide and update the type of the array automatically without having to write union manually. Is there a way to do this or is it only possible with classes?

you can use the type keyword to create a union type that automatically includes all interfaces extending ISlide, check this out :

type Slide = ITitleSlide | IHeaderSlide | IAnotherSlide;

const slides: Slide[] = [
    {
        component: TitleSlide,
        title: 'Title',
        subtitle: 'Subtitle'
    },
    {
        component: HeaderSlide,
        header: 'Header'
    },
    {
        component: AnotherSlide,
        // additional properties
    }
];

as you see by defining the Slide type as a union of all interfaces that extend ISlide, you can simply use Slide[] as the type of the slides array!

update<br>

interface ITitleSlide {
    component: typeof TitleSlide;
    title: string;
    subtitle: string;
}

interface IHeaderSlide {
    component: typeof HeaderSlide;
    header: string;
}

interface IAnotherSlide {
    component: typeof AnotherSlide;
    // additional properties
}

type SlideTypeMap = {
    [key: string]: Slide;
};

const slides: SlideTypeMap = {
    TitleSlide: {
        component: TitleSlide,
        title: 'Title',
        subtitle: 'Subtitle'
    },
    HeaderSlide: {
        component: HeaderSlide,
        header: 'Header'
    },
    AnotherSlide: {
        component: AnotherSlide,
        // additional properties
    }
};

type Slide = SlideTypeMap[keyof SlideTypeMap];

as you see,the Slide type is generated by using the keyof SlideTypeMap to retrieve all the possible keys of the SlideTypeMap and then accessing the corresponding values!

good luck!

The best way to keep a bunch of named types is interface map:

interface SlideTypeMap {
  ITitleSlide: ITitleSlide;
  IHeaderSlide: IHeaderSlide
}
type AnySlide = SlideTypeMap[keyof SlideTypeMap];

let slides: AnySlide[] = [...]

You may use interface merging to keep interface in multiple files at once, or use it to get list of iterfaces with their names