CODEWITHSUNDEEP
reactjstypescript
darkdark
darkdark

Reputation: 247

Declare module for subfolder

I'm trying to create types for the module "react-facebook-login/dist/facebook-login-render-props", a part of https://github.com/keppelen/react-facebook-login. Notice that it's in a subfolder.

I've created a d.ts file with the following module declaration:

declare module "react-facebook-login/dist/facebook-login-render-props" {

    interface RenderProps {
        onClick: Function;
        isDisabled: boolean;
        isProcessing: boolean;
        isSdkLoaded: boolean;
    }

    interface ReactFacebookLoginProps {
        appId: string;
        callback(userInfo: ReactFacebookLoginInfo): void;
        onFailure?(response: ReactFacebookFailureResponse): void;

        autoLoad?: boolean;
        buttonStyle?: React.CSSProperties;
        containerStyle?: React.CSSProperties;
        cookie?: boolean;
        cssClass?: string;
        disableMobileRedirect?: boolean;
        fields?: string;
        icon?: string | React.ReactNode;
        isDisabled?: boolean;
        language?: string;
        onClick?(event: React.MouseEvent<HTMLDivElement>): void;
        reAuthenticate?: boolean;
        redirectUri?: string;
        scope?: string;
        size?: "small" | "medium" | "metro";
        textButton?: string;
        typeButton?: string;
        version?: string;
        xfbml?: boolean;
        isMobile?: boolean;
        tag?: Node | React.Component<any>;
        render?(props: RenderProps): void;
    }

    interface ReactFacebookFailureResponse {
        status?: string;
    }

    interface ReactFacebookLoginInfo {
        id: string;
        accessToken: string;
        name?: string;
        email?: string;
    }

    interface ReactFacebookLoginState {
        isSdkLoaded?: boolean;
        isProcessing?: boolean;
    }

    class ReactFacebookLogin extends React.Component<
        ReactFacebookLoginProps,
        ReactFacebookLoginState
        > {}
}

But it seems that it's not picked up, since I'm receiving an error:

error TS7016: Could not find a declaration file for module 'react-facebook-login'. '.....\node_modules\react-facebook-login\dist\facebook-login-with-button.js' implicitly has an 'any' type.

What can I do in order to type this file which resides in a subfolder of a package?

Upvotes: 3

Views: 1046

Answers (1)

darkdark
darkdark

Reputation: 247

Turns out the issue wasn't the fact that the file was in a subfolder.

For Googlers looking for the solution, this is what I ended up with:

declare module "react-facebook-login/dist/facebook-login-render-props" {

    export interface RenderProps {
        onClick: Function;
        isDisabled: boolean;
        isProcessing: boolean;
        isSdkLoaded: boolean;
    }

    interface ReactFacebookLoginProps {
        appId: string;
        callback(userInfo: ReactFacebookLoginInfo): void;
        onFailure?(response: ReactFacebookFailureResponse): void;

        autoLoad?: boolean;
        buttonStyle?: React.CSSProperties;
        containerStyle?: React.CSSProperties;
        cookie?: boolean;
        cssClass?: string;
        disableMobileRedirect?: boolean;
        fields?: string;
        icon?: string | React.ReactNode;
        isDisabled?: boolean;
        language?: string;
        onClick?(event: React.MouseEvent<HTMLDivElement>): void;
        reAuthenticate?: boolean;
        redirectUri?: string;
        scope?: string;
        size?: "small" | "medium" | "metro";
        textButton?: string;
        typeButton?: string;
        version?: string;
        xfbml?: boolean;
        isMobile?: boolean;
        tag?: Node | React.Component<any>;
        render(props: RenderProps): void;
    }

    interface ReactFacebookFailureResponse {
        status?: string;
    }

    interface ReactFacebookLoginInfo {
        id: string;
        accessToken: string;
        name?: string;
        email?: string;
    }

    interface ReactFacebookLoginState {
        isSdkLoaded?: boolean;
        isProcessing?: boolean;
    }

    export default class ReactFacebookLogin extends React.Component<
        ReactFacebookLoginProps,
        ReactFacebookLoginState
        > {}
}

Upvotes: 2

Related Questions