Typescript Getting Child Props in Props

Question

I am new to Typescript. Let's say I have a component called TitleSubtitle which returns both a Title component and a Subtitle component.

The Title component has props:

interface TitleProps {
    text: string;
}

The Subtitle component has props:

interface SubtitleProps {
    text: string;
}

Now, when setting my props for the TitleSubtitle component, I could do this :

interface TitleSubtitleProps {
    titleText: string;
    subtitleText: string;
}

Or, is there some way to do something like this :

interface TitleSubtitleProps {
    title: TitleProps;
    subtitle: SubtitleProps;
}

Does this make sense? Thanks!

Answer 1

If you're looking to specify title and subtitle as specifically of type TitleProps["text"] and SubtitleProps["text"] respectively, you can do that -

interface TitleSubtitleProps {
  title: TitleProps["text"] // SubTitleProps.title: string
  subtitle: SubtitleProps["text"] // SubtitleTitleProps.subtitle: string
}