Typescript React псевдоним HOC (для использования <Component.alias />) проблемы с типизацией

Я не знаю, являются ли эти «предварительно пропущенные подкомпоненты» способом реагирования на это, но машинописный текст может помочь с пунктами 1–4.

Вы можете добиться желаемого эффекта без лишнего набора текста при использовании. Хитрость в том, что мы передаем исходный компонент функции и используем возвращаемое значение функции, которая изменяет исходный тип, чтобы дополнительные подкомпоненты были правильно напечатаны:

// Helper type to extarct the props form a component type
type ComponentProps<T extends React.ComponentClass<any> | React.SFC<any>> = 
    T extends React.ComponentClass<infer P> ? P :
    T extends React.SFC<infer P> ? P : never;


type RestOfProperties<TAllProps, TPartial extends Partial<TAllProps>> =
    Pick<TAllProps, Exclude<keyof TAllProps, keyof TPartial>> & Partial<TPartial>;

// We need to declare 2 versions of the function that does the mutating of the type one for SCF the other for ComponentClass
// There may be a solution with a single class but I can't see it right now
    declare class Helper<TComponent extends React.ComponentClass<any>, TAllProps extends ComponentProps<TComponent>> {
    Component: TComponent;
    alias<TName extends string, TProps extends Partial<ComponentProps<TComponent>> & Record<Exclude<keyof TProps, keyof ComponentProps<TComponent>>, never> >(name: TName, setProps: TProps) : 
        Helper<TComponent & { [P in TName]: (props: RestOfProperties<TAllProps, TProps>) => JSX.Element }, TAllProps>
}
declare class HelperSCF<TComponent extends React.SFC<any>, TAllProps extends ComponentProps<TComponent>> {
    Component: TComponent;
    alias<TName extends string, TProps extends Partial<ComponentProps<TComponent>> & Record<Exclude<keyof TProps, keyof ComponentProps<TComponent>>, never>>(name: TName, setProps: TProps) : 
        HelperSCF<TComponent & { [P in TName]: (props: RestOfProperties<TAllProps, TProps>) => JSX.Element }, TAllProps>
}
// Define the aliasFactory function, with overlaods for SCF and ComponentClass
function aliasFactory<TComponent extends React.SFC<any>>(Component: TComponent) : HelperSCF<TComponent, ComponentProps<TComponent>>
function aliasFactory<TComponent extends React.ComponentClass<any>>(Component: TComponent) : Helper<TComponent, ComponentProps<TComponent>> 
function aliasFactory<TComponent extends React.ComponentClass<any> | React.SFC<any>>(Component: TComponent) {
    class Helper<T extends React.SFC<any>> {
        public constructor(public Component: T) { }
        alias<TName extends string, TProps extends Partial<ComponentProps<TComponent>>>(name: TName, setProps: TProps) : any {
            (this.Component as any)[name] = (props: {}) => <this.Component {...setProps} {...props} />
            return this;
        }
    }

    return new Helper(Component as any);
};


// Usage sample 
// Have a mix of required and optional properties 
interface IOtherCounterProps {
    otherCount: number;
    speed?: number;
    required: number;
}

// Define the implementation 
const OtherCounterImpl : React.SFC<IOtherCounterProps> = ({ otherCount }) => <div>{otherCount}</div>;

// This is the symbol we can export that will contain all our aliasses
const OtherCounter = aliasFactory(OtherCounterImpl)
    .alias("startAt10", { otherCount: 10 })
    .Component;


interface ICounterProps {
    count: number;
}

class CounterProto extends React.Component<ICounterProps> {
    render() {
        return <div>{this.props.count}</div>;
    }
}

// Similar for classes, we can add as may aliasses as we wish 
// This is the symbol we can export that will contain all our aliasses
const Counter = aliasFactory(CounterProto)
    .alias("startAt5", { count: 5})
    .alias("startAt10", { count: 10})
    // .alias("startAt10", { count: 10, notThere: ""}) // this would be an error (added after feedback)
    .Component;




let d = <div >
    <Counter count = {3} />
    {/* Required properties that have been specified become optional  */}
    <Counter.startAt5  />
    <Counter.startAt10  />
    {/* Optional properties remnain optional, the required ones remain required */}
    <OtherCounter.startAt10 required = {10}  />
</div>

Частичная детская площадка ссылка на сайт