import * as React    from 'react'
import { Component } from 'react'

type PropTypes = {
    str: string
}

// Класс компонента
class MyComponent extends Component<PropTypes> {
    handlers: Handlers

    constructor(props) {
        super(props)
        this.handlers = new Handlers(this)
    }

    public render() {
        return <div onClick={this.handlers.onClick}/>
    }
}

// Абстрактный класс для создания классов с обработчиками
abstract class HandlersCreator<C extends Component> {
    props: Pick<C, 'props'> // Пытаемся присвоить тип «props»

    constructor(public component: Readonly<C>) {
        // Тут происходит ругань, что нельзя присвоить, ибо типы
        // 'C["props"]' и 'Readonly<{ children?: ReactNode }> & Readonly<{}>'
        // несовместимы
        this.props = component.props
    }

    public onClick() {
        // Тут колдунство для клика
    }
}

// Класс с обработчиками
class Handlers extends HandlersCreator<MyComponent> {
    constructor(component: MyComponent) {
        super(component)

        // Тут тоже ошибка
        // Property 'str' does not exist on type 'Pick<MyComponent, "props">'
        console.log(this.props.str)
    }
}