Typescript friendliness

[yang]

Since this dynamically changes component signatures, I'm wondering what the easiest approach is to get the correct Typescript types on wrapper components - I'm guessing you just need to redeclare the prop types of the wrapper component, but wanted to see if I'm missing anything. Thanks!

[otraghly]

I've made simple wrapper:
uncontrollabe_ts

Could be used like so:

// props which example Component will share with uncontrollable
interface ControllableProps {
    value?: string
    on_value_change: (value: string) => void
}

// Props of the example Component (extends ControllableProps)
interface Props extends ControllableProps {
    color: string
    autoFocus?: boolean
}

class Example extends React.Component<Props> {
... Here goes the component
}

// Make type with all props handler by uncontrollable (extends ControllableProps)
interface UncontrollableProps extends ControllableProps {
    defaultValue?: string
}

// Resulting component:
export default Uncontrollable<Props, UncontrollableProps>({
    value: 'on_value_change',
})(Example)

[otraghly]

Hi guys, it's me again.
I rewrited the wrapper https://github.com/otraghly/uncontrollabe_ts, made it much simplier to use. No more extends and typecasts (well, almost). Look:

// Tested on TS 3.0.3
//
// The Props interface should specify all props of the component,
// AND default*-like props for uncontrollable.
//
// Note that on_change- like handlers is mandatory, value- and default*- are optional.
interface Props {
    // First props set
    value?: number // Optional
    on_change: (value: number) => void // Mandatory, as uncontrollable guarantees presence (or TS will force you to ckeck before use.)
    defaultValue?: number // Though extendable component will not see it. 

    // Second set
    title?: string
    on_title_change: (t: string) => void
    defaultTitle?: string

    // Other props, whatever you have.
    other: boolean
    another?: string
}

class Example extends React.Component<Props> {
    public render () { return null }
}

// It's crucial to pass values typed as string literals, otherwise it won't work!
export default Uncontrollable({
    value: 'on_change' as 'on_change', // As literal!
    title: 'on_title_change' as 'on_title_change', // As literal!
})(Example)

[alex-e-leon]

I've created an attempt to type the HOC in definitely typed here:
DefinitelyTyped/DefinitelyTyped#50115

It could likely use some improvements, but since typescript 4.1 introduces template literals to TS it should be possible to completely type the HOC now

[jquense]

ya'll I recommend people use the hook, not the HOC for nicer TS support. It's API is designed to be easier to type amoung other considerations. Im also more than happy to accept PRs to improve the typing for the HOC

[alex-e-leon]

Out of curiosity outside of typing what's the reason for preferring the hook?

Personally I like how much simpler the API is with the HOC - as it's just one line of code, and if the types can be generated from the HOC it means you don't need to worry about typing anything but the controlled component.