2

再現コードは最小限にシンプルにしたので、意味自体はありません。

interface TextProps { data: { text: string }; }
interface ObjProps { data: object; }

const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</p>;
const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>;

const make = <T extends { data: {} }>(Elem: React.FC<T>, data: T['data']) => <Elem data={data} />;

export const res1 = make<ParaProps>(Para, { text: 'hoge' });
export const res2 = make<ObjProps>(Json, { foo: 'bar' });

上のコードはざっと通したい内容です。似たようなPropsを持つ(上の例ではdata)、複数のコンポーネントがあり、それを作成するmakeという関数があるという状態です。

このmakeのタグの部分で「型 '{ data: T["data"]; }' を型 'T' に割り当てることはできません。ts(2322)」というエラーが出てくるのですが、解消できるような型をanyを使わずに書くことができません。

通るような書き方、またはそもそもこのようなことができないのかを教えてください。

補足ですが、説明のために make とした部分は

const opt = (Elem) => ({ data, ...props }) => data ? <Elem data={data} {...props} /> : null;
export const OptPara = opt(Para);
export const OptJson = opt(Json);

という感じのことがやりたいのですが、不必要に型が複雑になり(しかも通っていない)ので、上のように書いた感じです。こちらの方が答えやすいとかあれば、こちらに答えていただいても構いません。

1 件の回答 1

1

とりあえず質問で提示されているコードのコンパイルが通るものを考えてみます。

TS2322が吐かれる理由はエラーメッセージにも表示されている通り、「Tdata以外のプロパティを持ち得る(が、dataしか指定されていない)」ため。
ということはPropsのキーとして使えるものを制限できるようにすればいいのでは?というのがまず案1。

試行錯誤の結果こんなものが生まれました。

import * as React from 'react'

interface BaseProps { data: {} }
interface ParaProps { data: { text: string } }
interface ObjProps { data: object; }

const Para: React.FC<ParaProps> = ({ data }) => <p>{data.text}</p>;
const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>;

const make = <T extends BaseProps>(Elem: React.FC<{ [K in keyof BaseProps]: T[K] }>, data: T['data']) => <Elem data={data} />;

export const res1 = make<ParaProps>(Para, { text: 'hoge' });
export const res2 = make<ObjProps>(Json, { foo: 'bar' });

うん。なんとも香ばしい…

でもコードがおかしいときに正しくコケるのか自信がない上に(一応試したので大丈夫そうですが)、make<ParaProps>とかわざわざ書く必要がない気がしてきました。

Propsのキーが固定されているのであればその部分だけGenerics使うべきなのでは!?
ということで以下のようなものでも要件が満たせそう。

import * as React from 'react'

type SomeProps<T> = { data: T }
type ParaProps = SomeProps<{ text: string }>
type ObjProps = SomeProps<object>

const Para: React.FC<ParaProps> = ({ data }) => <p>{data.text}</p>;
const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>;

const make = <T extends {}>(Elem: React.FC<SomeProps<T>>, data: T) => <Elem data={data} />;

export const res1 = make(Para, { text: 'hoge' });
export const res2 = make(Json, { foo: 'bar' });

そこそこスッキリした気がします。(もうちょっとどうにかなりそう)


ところでもしpropsがdata以外も保つ場合持たない場合が存在するのであればObject spredするだけなんですけどね…

import * as React from 'react'

interface TextProps { data: { text: string }; }
interface ObjProps { data: object; }

const Para: React.FC<TextProps> = ({ data }) => <p>{data.text}</p>;
const Json: React.FC<ObjProps> = ({ data }) => <pre>{JSON.stringify(data)}</pre>;

const make = <T extends { data: {} }>(Elem: React.FC<T>, props: T) => <Elem {...props} />;

export const res1 = make(Para, { data: { text: 'hoge' } });
export const res2 = make(Json, { data: { foo: 'bar' } });

(深夜テンションで書いたコードなのでいろいろと怪しいところがあるかもしれません。ご了承ください。)

1
  • ありがとうございます! 実際に付けたいのは補足にも上げた opt に近いコードで案1を参考に const opt = <T extends { data: {} }>(Elem: React.FC<{ 'data': T['data'] }>) => ({ data, ...props }: T) => data ? <Elem data={data} {...props} /> : null; でコンパイルを通すことができました。これが良いとも言い切れませんが、それでもコンパイルが通って満足です。TypeScriptのgenerics、もうちょっと詳しくなりたいものですね。
    – user29556
    Commented 2019年6月16日 4:14

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。