import React from "react";

interface KlassComponentProps {
    one?: string;
    two?: number;
    problematic?: any;
}

/**
 * A component that can be used directly, or subclassed.
 * Any derived components can have additional props, but must at least have
 * the props from `KlassComponentProps`.
 * */
class KlassComponent<TProps extends KlassComponentProps = KlassComponentProps>
    extends React.Component<TProps>
{
}

function TestComponent() {
    // Problem: autocomplete options (ctrl+space) do not include `one` or `two`
    // once the `problematic` prop is assigned
    const badcase = <KlassComponent problematic="test"></KlassComponent>;

    // Without `problematic`, prop autocomplete shows `one` and `two`.
    const okcase = <KlassComponent></KlassComponent>;
}