Как правильно определить ссылку (React.RefObject <StyledComponentClass>) для styled-компонентов (для TypeScript)?

Question

Как правильно определить ссылку для стилевых компонентов?

Я написал следующий тестовый код. Это улучшенный код, в отличие от предыдущего ( Как правильно определить ссылку (React.RefObject) для стилевых компонентов (для TypeScript)? ). Добавлен тип ссылки StyledComponentClass< {}, any>.

import React, {Component, RefObject, ReactNode} from 'react';
import styled, {StyledComponentClass} from 'styled-components';

type TModalShadowContainer = StyledComponentClass<{}, any>;

const ModalShadowContainer: TModalShadowContainer = styled.div` 
    background-color: black;
`;

export default class Modal extends Component {

    private readonly modalRef: RefObject<TModalShadowContainer>;

    constructor(props: {}) {
        super(props);
        this.modalRef = React.createRef<TModalShadowContainer>();
    }

    public render(): ReactNode {
        return (
            <ModalShadowContainer ref={this.modalRef}>
                {this.props.children}
            </ModalShadowContainer>
        );
    }

}

В строке появляется ошибка:

<ModalShadowContainer ref={this.modalRef}>

Текст ошибки:

Type 'RefObject<StyledComponentClass<{}, {}, {}>>' is not assignable to type 'string | ((instance: Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any> | null) => any) | RefObject<Component<{ ...; }, any, any>> | undefined'.
  Type 'RefObject<StyledComponentClass<{}, {}, {}>>' is not assignable to type 'RefObject<Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any>>'.
    Type 'StyledComponentClass<{}, {}, {}>' is not assignable to type 'Component<{ as?: string | ComponentClass<any, any> | StatelessComponent<any> | undefined; theme?: {} | undefined; }, any, any>'.
      Property 'setState' is missing in type 'StyledComponentClass<{}, {}, {}>'.

Как описать (определить) ссылку на языке TypeScript?

Answer 1

Может быть, это поможет.

type MamkinHackerType<T> = T extends StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<infer ElementType>, infer ElementType>, infer T, infer H>
  ? ElementType & React.Component<React.DetailedHTMLProps<React.HTMLAttributes<ElementType>, ElementType> & T & H>
  : never
;

private readonly modalRef = React.createRef<MamkinHackerType<typeof ModalShadowContainer>>();