Блог

Я использую TypeScript в синтаксисе JSX без использования React (или любой другой подобной библиотеки). Для jsxFactory я использую свою собственную фабрику.

Это самая простая версия того, что я хочу:

 <Panel>
  <Banner text="FREE OFFER" align="left" />
</Panel>
  

align Свойство действует required только тогда, когда Banner оно помещено внутрь Panel .

Banner может использоваться вне a Panel , но в этом случае использование align свойства должно выдавать ошибку.

Я хочу, чтобы это произошло во время компиляции.

Я уже пробовал это на игровой площадке typescriptlang.

 declare global {
    namespace JSX {
        interface ElementChildrenAttribute { children: {}; }
    }
}

interface BannerInterface {
    title: string,
    text: string
}

class Banner<T extends BannerInterface = BannerInterface>  {
    constructor(props: T) {
        //
    }
}

interface AlignmentInterface extends BannerInterface {
    align: string
}
interface PanelInterface {
    adId: string,
    children: Banner<AlignmentInterface> // I'm trying to pass the AlignmentInterface to the Banner generic
}
class Panel {
    constructor(props: PanelInterface) {
        //
    }
}

// I want this to throw compile error, as align is not in the BannerInterface
const adBanner = <Banner title="Independent Banner" text="test" align="left" />;

// I also want this to throw as Banner is being used as a children of Panel,
// and for that I want the align prop to be required.
const panelBanner = (<Panel adId="1">
                        <Banner title="Banner inside Panel" text="test" />
                     </Panel>);


export default { Panel, Banner };