Как правильно определить ссылку на стилизованные компоненты?
Я написал следующий тестовый код. Это доработанный код, в отличие от предыдущего (Как правильно определить ссылку (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?





Может это поможет.
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>>();
Просто посмотрите на тип, который хотите получить ts-compiler, и «сделайте вывод» о нем с помощью условных типов TypeScript.
Но я думаю, что это не очень хорошее решение. Нам нужны общие улучшения в типизации реагирующих / стилизованных компонентов.
Спасибо за ответ! Для меня это пока высший полет)
Где вы нашли это решение?