TypeScriptのgenericsを使った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>, 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);
という感じのことがやりたいのですが、不必要に型が複雑になり(しかも通っていない)ので、上のように書いた感じです。こちらの方が答えやすいとかあれば、こちらに答えていただいても構いません。