Reactivesearch: Typescript support

[yytsui]

Issue Type:enhancement

Description:

Any plan to support type definitions file for Typescript?
Thanks!

[romainquellec]

2.3.0, someday

It's time ! (Will see how to do it)

[metagrover]

That'd be awesome. We have been swamped with the stuff on reactivemaps among other things 😅

Feel free to reach out to me here or on gitter if you need any help or suggestions. Looking forward to see the typescript support 😄

[romainquellec]

Well, not sure to have the time. (I'm not using this project right now, I'm evaluating it)

If someone want to help me|the team, this is the way to go : Publishing on TS

[romainquellec]

@yytsui, @metagrover do you know how to make it ? Do you have any recommendation ?
seems like a lot of work, looking at the examples.

[romainquellec]

In short, we need something like

import * as React from 'react';

declare namespace DataController {
    export interface DataControllerProps {
      addComponent: void,
        removeComponent: void,
        updateQuery: void,
        selectedValue?: any,
        componentId: string,
        beforeValueChange?: void,
        children?: any,
        className?: string,
        customQuery?: void,
        defaultSelected?: any,
        filterLabel?: string,
        onQueryChange?: void,
        onValueChange?: void,
        showFilter?: boolean,
        style?: any,
        URLParams: boolean,
    }
    //export interface DataControllerState {}
}
//declare class DataController extends React.Component<DataController.DataControllerProps, DataController.DataControllerState> { }
declare class DataController extends React.Component<DataController.DataControllerProps> { }
export default DataController;

For each components.

[metagrover]

Yeah, that's pretty much it. I agree it is quite a bit of work 😅

We have been looking into material-ui's type definitions and we will probably use a similar pattern.

Here's how I'm thinking of achieving this: Start with defining a standard component type definitions (should be simple, since most of the components share same method naming) and then extending that definition to create typings for every component.

[romainquellec]

Well, I don't have so much knowledge about your components. How can we work on this ?

I'm proposing this :
You (or your team) create a new repo on appbaseio as a working version, then we merge it to DefinitelyTyped ?
So, I can submit some code on this and that. Are you ok with that ?

Thanks !

[romainquellec]

There is not much now, but you can use this

Edit : Oh, ok, at the end, you want to do it in this repo, make sense. So, same, make a branch or something ? A place to start.

[romainquellec]

Maybe it can help : https://yarnpkg.com/en/package/react-to-typescript-definitions

[metagrover]

Hey @romainquellec! Thanks, this looks interesting. I will try it over the weekend (Sorry, I got busy with other things and this issue skipped my mind)

In any case, I will set up a separate branch here with the standard component typedefs in place in a day or two, and then we can take it further from there.

Will keep the progress posted here!

[metagrover]

I tried react-to-typescript-definitions and I was able to generate the type defs for ReactiveBase component as follows:

declare module 'ReactiveBase' {
    import * as React from 'react';

    export interface ReactiveBaseProps {
        app?: any;
        children?: any;
        credentials?: any;
        headers?: any;
        queryParams?: any;
        theme?: any;
        themePreset?: any;
        type?: any;
        url?: any;
        mapKey?: any;
        style?: any;
        className?: any;
    }

    export default class ReactiveBase extends React.Component<ReactiveBaseProps, any> {
        render(): JSX.Element;
    }
}

via

cat ./path/to/ReactiveBase.js | npx react2dts --module-name "ReactiveBase"

Notice how every prop is of type any. And, for every other component, I got:

declare module 'TextField' {
    import * as React from 'react';

}

as the output. Not sure why.

Note that all the components except ReactiveBase, are exposed via connect() method from redux which could be the cause. I also tried some other solutions, but no luck yet 😞.

[metagrover]

Primary support has been added. Check typescript branch for details. After some tests, we will roll this out in the upcoming release.

All credits to @dhruvdutt 🎉