New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding TypeScript Support (definitions) #11
Comments
Quick note for anyone stubbing the typedef for now: Typescript requests a |
I'd welcome some ts definitions in a PR. |
I wouldn't mind picking up this work unless someone else has already started on it. Do we want to keep the type definition file in reach router itself or should it be contributed to the @types organization (DefinitelyTyped)? |
@ryanflorence any reason why you closed this issue? I'd leave this open, so people know that there's actually something they can help with. @AWare I also tried adding the @joshthecoder From my experience so far, I can tell that it's always more convenient to have typescript support by default, so there's no need to add an additional |
I've started writing up some type definitions on my end, and I'll probably end up making a PR. There are a few things I'm not 100% sure how to write types for (primarily the |
@kingdaro
i'm not really sure the best way to go about that either, but as i mentioned in #21, I was able to use module augmentation to suppress those errors (see https://t.co/MJGGv57cDV), but i feel like that's not something you'd want to do in a library |
@kingdaro I was thinking of just using Intersection Types to mixin the additional props expected of a Route component.
One issue that remains is how to also define the param props. |
I thought of that as well, however that allows using the
That can be done through a generic on the props interface, and by using |
@kingdaro true. The I think the only way we could hide those props from the component would probably be to augment the react module. Maybe instead of adding it to I can try to code up an example of what I mean if this isn't clear. Maybe @ryanflorence can speak to how important it would be to exclude path/default from the prop types. |
I tried to create simple render-prop wrapper to workaround the import {Router, Link, RouteComponentProps} from "@reach/router";
interface RouteProps {
path: string;
children: (route: RouteComponentProps) => React.ReactNode;
}
class Route extends React.Component<RouteProps> {
render() {
const {children, ...route} = this.props;
return children(route);
}
} and usage like so const Page1 = () => <div>Page 1</div>;
const Page2 = (props: {url: string}) => <div>Page 2 with url: {props.url}</div>;
const Main = () => (
<Router>
<Route path="/page1">{route => <Page1 />}</Route>
<Route path="/page2">
{route => <Page2 url={route.uri || ""} />}
</Route>
</Router>
); This type checks but crashes in runtime with
It seems that Reach Router removes the children prop from the wrapping component... |
Uh, stupid me. Just realized why this cannot work: Reach Router allows you to nest routes with your own components and it does by checking the children. So of course this does not work because there's no way it can read the function closure. Not sure if there's any super clean way to type this. |
any updates on this? i can't use the router currently because of the lack of types? |
There are typings for it |
Hi,
this looks like an interesting project, however, I've had some problems getting things up and running with TypeScript.
Is there anything planned regarding support for TypeScript?
Cheers
The text was updated successfully, but these errors were encountered: