Question

我在Web应用程序中使用react-facebook-login库和TypeScript。我还安装了@types/react-facebook-login。当我这样导入库时，一切正常：

import ReactFacebookLogin from 'react-facebook-login'

但是，该库允许导入没有任何样式的组件（这就是我想要的）：

import ReactFacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'

在这种情况下出现错误：

找不到模块'react-facebook-login / dist / facebook-login-render-props'的声明文件

我的tsconfig.json是用create-react-app app --template typescript创建的：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

有什么办法可以解决？

Answer 1

?

只需将以下代码添加到 react-app-env.d.ts。

declare module 'react-facebook-login/dist/facebook-login-render-props' {
  export interface RenderProps {
    onClick:
      | ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)
      | undefined;
    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
  > {}
}

在TypeScript中找不到模块的声明文件

1 个答案: