Skip to content

Instantly share code, notes, and snippets.

@jcreamer898
Last active April 28, 2017 16:11
Show Gist options
  • Save jcreamer898/292365bce71c20f8a8d4aa8551c568a1 to your computer and use it in GitHub Desktop.
Save jcreamer898/292365bce71c20f8a8d4aa8551c568a1 to your computer and use it in GitHub Desktop.

This works in JavaScript, but when I try to compile it with TS, I get the following error...

I want to be able to do the following...

const Auth = asyncComponent(() =>
  require.ensure([], require => require("../auth/index").default, "auth_async"),
);

I think I have something wrong in my types.

import * as React from "react";
import { Component } from 'react';
export interface IAsyncComponentProps {}
export interface IAsyncComponentState {
Component: typeof Component
}
interface IGetComponent {
(): Promise<typeof Component>;
}
export default function asyncComponent (getComponent: IGetComponent) {
let ComponentCache: typeof Component = null;
return class AsyncComponent extends Component<IAsyncComponentProps, IAsyncComponentState> {
state: {
Component: typeof Component,
};
constructor(props: IAsyncComponentProps) {
super(props);
this.state = { Component: ComponentCache };
}
componentWillMount() {
if (!this.state.Component) {
getComponent().then((Component) => {
ComponentCache = Component;
this.setState({ Component });
});
}
}
render() {
const { Component } = this.state;
if (Component) {
return <Component {...this.props} />;
}
return null;
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment