Vyhledávání na webu

javascript - Je možné psát typované, ale generické, funkční komponenty, které mohou být použity mimo React prostředí?


Chceme distribuovat komponenty s úmyslem, že mohou být použity jakýmkoli kompatibilním runtime. Tyto komponenty jsou jen funkce napsané v JSX a transpilevané do obecné tovární funkce h. Výstup by měl být proto (většinou) kompatibilní s React, Preact, Inferno, Hyperapp, vhtml atd. Například zde je jednoduchá komponenta <Title />:

import { h } from 'runtime';

const Title = ({ title, url }) => (
    <div className="component-heading">
        <a href={url} className="component-heading-link">
            {title}
        </a>
    </div>
);

export default Title;

Rádi bychom naše komponenty zdobili typy, především proto, aby spotřebitel při předávání vlastností dostával pomoc. Pokud bychom si vypůjčili typy z Reactu, mohlo by to vypadat takto:

import { SFC } from 'react';
import { h } from 'runtime';

export interface Props { … }

const Title: SFC<Props> = ({ title, url, premium }) => (
    <div className="component-heading">
        <a href={url} className="component-heading-link">
            {title}
        </a>
    </div>
);

export default Title;

To je velmi pěkné, pokud spotřebitel používá TypeScript a React, ale pokud používá Preact nebo jakékoli jiné kompatibilní runtime, typy se budou srážet.

Je tedy možné psát funkční komponenty, které jsou dostatečně obecné, aby je mohly používat prostředí, která nejsou React?