Since getInitialProps isn't part of Component, nothing tells TypeScript what it will receive or return, so you have to do that.
It looks like you're expecting the query string to contain id, title, and body (all strings). Since that's not quite what your Props type is, you can define that inline:
static getInitialProps({ query: { id, title, body } }: { query: {id: string, title: string, body: string} }) {
return { postId: id, title, body };
}
...or as that inline type is a bit unwieldy:
type QueryParams = {
id: string;
title: string;
body: string;
};
then
static getInitialProps({ query: { id, title, body } }: { query: QueryParams }) {
return { postId: id, title, body };
}
or even
type PartialContext = {
query: {
id: string;
title: string;
body: string;
};
};
then
static getInitialProps({ query: { id, title, body } }: PartialContext) {
return { postId: id, title, body };
}
I shold mention that your getInitialProps doesn't provide the id prop, but it's not listed as optional in your Props type, either.
Note that all of the above supply a type for the context parameter that Next.js will pass into getInitialProps, but they don't supply a type for the return value of getInitialProps. For completeness, you might want to supply that as well. Since what you're returning is only part of Props, the type would be Partial<Props>.
So for instance, using QueryParams (the middle option above, which is the one I like best):
type QueryParams = {
id: string;
title: string;
body: string;
};
then
static getInitialProps({ query: { id, title, body } }: { query: QueryParams }): Partial<Props> {
// Type of the parameter −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^−−−− type of the return value
return { postId: id, title, body };
}
Here's the above incorporated with your code:
type Props = {
id: number;
title: string;
body: string;
postId: string;
};
type QueryParams = {
id: string;
title: string;
body: string;
};
export default class extends Component <Props> {
static getInitialProps({ query: { id, title, body } }: { query: QueryParams }): Partial<Props> {
return { postId: id, title, body };
}
render() {
return (
<div>
<h1>My blog post #{this.props.postId}</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
);
}
}