Binding element 'title' implicitly has an 'any' type

Viewed 8672

I have already defined the types but I still get an error stating:

Binding element 'title' implicitly has an 'any' type.

on this line for id, title and body

static getInitialProps({ query: { id, title, body } }) {

Here is my code: import React, { Component } from 'react';

type Props={
    id: number;
    title: string;
    body: string;
    postId: string;
}

export default class extends Component <Props> {
  static getInitialProps({ query: { id, title, body } }) {
    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>
    )
  }
}
1 Answers

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>
        );
    }
}
Related