Add a few tests and examples for typing WithRouter better

This commit is contained in:
NickBolles 2018-10-19 16:10:01 -05:00
parent d91e71dc06
commit a6bbbc537e

View File

@ -70,14 +70,14 @@ Router.prefetch("/route").then(Component => {
const element = <Component />;
});
interface TestComponentProps {
interface TestComponentProps extends WithRouterProps {
testValue: string;
}
class TestComponent extends React.Component<TestComponentProps & WithRouterProps> {
class TestComponent extends React.Component<TestComponentProps> {
state = { ready: false };
constructor(props: TestComponentProps & WithRouterProps) {
constructor(props: TestComponentProps) {
super(props);
props.router.ready(() => {
this.setState({ ready: true });
@ -97,12 +97,10 @@ class TestComponent extends React.Component<TestComponentProps & WithRouterProps
withRouter(TestComponent);
interface TestComponent2Props extends WithRouterProps {
testValue: string;
}
class TestComponent2 extends React.Component<TestComponent2Props> {
state = { ready: false };
@ -124,15 +122,32 @@ class TestComponent2 extends React.Component<TestComponent2Props> {
}
}
let TestComponent2WithRouter = withRouter(TestComponent2)
let res = <TestComponent2WithRouter testValue="" />
const TestComponent2WithRouter = withRouter(TestComponent2);
const res = <TestComponent2WithRouter testValue="" />;
interface TestSFCQuery {
test?: string;
}
interface TestSFCProps extends WithRouterProps<TestSFCQuery> { }
interface TestSFCProps extends WithRouterProps<TestSFCQuery> {
testProp: string;
}
const TestSFC: React.SFC<TestSFCProps> = ({ router }) => {
return <div>{router.query && router.query.test}</div>;
};
const TestSFCComponent = withRouter(TestSFC);
const res2 = <TestSFCComponent testProp="asdf"/>;
const TestSFC2 = withRouter<TestSFCProps>(({ router }) => {
return <div>{router.query && router.query.test}</div>;
});
const res3 = <TestSFC2 testProp="asdf" />;
const TestSFC3 = withRouter(({ router }) => {
return <div>{router.query && router.query.test}</div>;
});
const res4 = <TestSFC3 />;