https://www.typescriptlang.org/docs/handbook/declaration-merging.html
The hyperlink provided above offers insights into declaration merging using interfaces. It's something I'm interested in exploring further, particularly with interfaces that have a generic component. Currently, I am working with Typescript version 3.0.3.
Although my code achieves the desired functionality, I find myself puzzled by the inability to achieve the same outcome through declaration merging.
interface MyRouteComponentProps<P, C extends StaticContext = StaticContext> extends RouteComponentProps<P, C> {
loadCandidateFromQueryParam: (candidateId: number) => void
}
class CandidateDetailContainer extends React.Component<MyRouteComponentProps<RouteMatchProps>, {}> {
public componentWillMount() {
this.props.loadCandidateFromQueryParam(Number(this.props.match.params.candidateId));
}
Why does this approach not work as expected?
interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
loadCandidateFromQueryParam: (candidateId: number) => void
}
class CandidateDetailContainer extends React.Component<RouteComponentProps<RouteMatchProps>, {}> {
Instead of merging them, it appears to completely override the entire definition of RouteComponentProps. This results in errors regarding unused parameters P and C, which should be resolved if the definitions were merged correctly. Additionally, there is an error about the absence of the "match" field, despite it being present in the original definition.
Here is the original definition I am attempting to merge with for reference:
export interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
history: H.History;
location: H.Location;
match: match<P>;
staticContext: C | undefined;
}