Typescript 在道具中獲取兒童道具

Question

我是 Typescript 的新手。 假設我有一個名為TitleSubtitle的組件，它返回一個Title組件和一個Subtitle組件。

Title組件有 props：

interface TitleProps {
    text: string;
}

Subtitle組件有道具：

interface SubtitleProps {
    text: string;
}

現在，在為TitleSubtitle組件設置道具時，我可以這樣做：

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

或者，有沒有辦法做這樣的事情：

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

這有意義嗎？ 謝謝！

Answer 1

如果您希望分別指定title和subtitle為TitleProps["text"]和SubtitleProps["text"]類型，您可以這樣做 -

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