Как правильно использовать типизацию TS с styled-компонентами withComponent ()?

Question

У меня проблемы с обертыванием моей головы, используя withComponent() метод StyledComponent в среде Typescript.У меня есть простой стилизованный компонент, который я хочу применить к компоненту React.Но компилятор Typescript жалуется на несоответствие реквизита.

Как мне использовать метод withComponent(), чтобы получить стилизованный компонент, который также имеет реквизиты из моего реактивного компонента?

import React from 'react';
import styled from 'styled-components';

const RedBackground = styled.div`
    background-color: red;
`;

interface MenuContainerProps {
    focus?: boolean;
}

class MenuContainer extends React.Component<MenuContainerProps> {
    static defaultProps = {
        focus: true,
    };

    render() {
        return (
            <div>MenuContainer</div>
        );
    }
}

const RedMenuContainer = RedBackground.withComponent(MenuContainer);
//                                       error here  ^^^^^^^^^^^^^

/*
    Usage of RedMenuContainer. It should have a red `background-color` and a `focus` prop.

    <RedMenuContainer focus={true}>
        ... children ...
    </RedMenuContainer>
*/

Сообщение об ошибке:

[ts]
Argument of type 'typeof MenuContainer' is not assignable to parameter of type 'ComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'.
  Types of property 'defaultProps' are incompatible.
    Type '{ focus: boolean; }' has no properties in common with type 'Partial<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>'.

Answer 1

К сожалению, это известная проблема с типами TypeScript компонента TypeScript.Обходной путь на данный момент должен был бы заставить правильный результирующий тип:

import styled, { StyledComponentClass } from 'styled-components';

// ...

type StyledRedMenuContainer = StyledComponentClass<MenuContainerProps, any, MenuContainerProps>
const RedMenuContainer = RedBackground.withComponent(MenuContainer as any) as StyledRedMenuContainer;

Была некоторая работа , чтобы исправить типы TypeScript для withComponent, но я полагаю, что это может быть остановленоЧто касается Styled Components 4.0, типы TypeScript извлекаются извне в DefinitiveTyped.

В качестве примечания, ваш MenuContainer в этом случае должен будет принять className проп и передать его своему дочернему элементу <div> для того, чтобы он действительно взял красный стиль.