将React组件从Javascript返回到Typescript

时间:2018-07-25 11:24:46

标签: javascript reactjs typescript

我的应用程序中使用了一个身份验证库,该库使用javascript编写。我需要从一个打字稿文件中调用一个函数,但是遇到了问题。

因此javascript的相关部分是:

const authentication = {

    required: (WrappedComponent, renderLoading) => {
        return class extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    signedIn: false,
                    error: null,
                };
            }

            componentWillMount() {
                console.log(window.location);
                acquireToken(() => {
                    this.setState({
                        signedIn: true
                    });
                });
            }

            render() {
                if (this.state.signedIn) {
                    return (<WrappedComponent {...this.props} />);
                }
                return typeof renderLoading === 'function' ? renderLoading() : null;
            }
        };
    },
    signOut: () => window.msal.logout(),
    getAccessToken: () => state.accessToken
}

export default authentication;

所以当我在React Typescript组件中按如下方式使用它时:

<Route exact={true} path="/register" component={authentication.required(Register)} />

我收到以下错误:

Types of property 'component' are incompatible.
Type 'typeof (Anonymous class)' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext>> | StatelessComponent<RouteComponentProps<...'.
Type 'typeof (Anonymous class)' is not assignable to type 'StatelessComponent<any>'.
Type 'typeof (Anonymous class)' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.

我认为是因为打字稿无法确定JavaScript的返回类型吗?我该如何进行这项工作?

预先感谢

0 个答案:

没有答案