@dsoe5ifsxl494939rjposted at 2022-03-21

子コンポーネントにジェネリクスを渡したい

Q&A

解決したいこと

ReactとTypeScriptの構成のブログです。
親コンポーネントから子コンポーネントにジェネリクスとなる型を渡したいのですが、書き方が分からないため教えていただきたいです。

該当するソースコード

親

const BlogPage = () => {
  const data = getBlogData();

  return (
    <ArticleTemplate data={data} category={"blog"} />
  )
}

子

type ArticleTemplateProps<T extends Blog | News> = {
  data: Article<T>;
  category: "blog" | "news";
}
const ArticleTemplate: VFC<ArticleProps<【親からここにBlogかNews渡したい】>> = ({ data, category }) => {
  const { title, body } = data;

  return (
    <section>
      <h1>{title}</h1>
      <p>{category === "blog" ? "ブログ" : "おしらせ"}</p>
      <p>{body}</p>
    </section>
  )
}

自分で試したこと

子を呼び出すときに下記のようにpropsのように型を渡してみましたが、Blogにエラーが表示されました。

親

// 省略
<ArticleTemplate Genelics={Blog} data={data} category={"blog"} />

// エラー 'Blog' は型のみを参照しますが、ここで値として使用されています。ts(2693)

1Answer

@kazukinagata posted at 2022-03-21

型は値ではない(トランスパイルしたら消える情報)なので、値のように親から子へ型をprops等で渡す方法はありません。

今回の要件なら自分ならこうするでしょう

type ArticleTemplateProps = {
  data: Blog;
  category: "blog";
} | {
  data: News;
  category: "news";
}

コンポーネントの中では、categoryの値で条件分岐することでdataの型を使い分けられます。

1Like

Comments

@dsoe5ifsxl494939rj
Questioner
ご回答いただきありがとうございます。
ご教示いただいた案で対応します。

> 型は値ではない(トランスパイルしたら消える情報)
はなるほどと思いました。

Are you sure you want to delete the question?