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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
0
3 091
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>>();

Где вы нашли это решение?

Khusamov Sukhrob 03.11.2018 20:29

Просто посмотрите на тип, который хотите получить ts-compiler, и «сделайте вывод» о нем с помощью условных типов TypeScript.

Kirill A. Khalitov 04.11.2018 21:35

Но я думаю, что это не очень хорошее решение. Нам нужны общие улучшения в типизации реагирующих / стилизованных компонентов.

Kirill A. Khalitov 04.11.2018 21:39

Спасибо за ответ! Для меня это пока высший полет)

Khusamov Sukhrob 06.11.2018 08:14

Другие вопросы по теме