绑定元素 'title' 隐式具有 'any' 类型

Question

我已经定义了类型，但我仍然收到一条错误消息：

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

在此行输入 id、标题和 body

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

这是我的代码：从 'react';

导入 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>
    )
  }
}

Answer 1

由于 getInitialProps 不是 Component 的一部分，没有任何内容告诉 TypeScript 它将接收什么或 return，所以你必须这样做。

您似乎希望查询字符串包含 id、title 和 body（所有字符串）。由于这与您的 Props 类型不完全相同，因此您可以定义内联：

static getInitialProps({ query: { id, title, body } }: { query: {id: string, title: string, body: string} }) {
    return { postId: id, title, body };
}

...或者因为内联类型有点笨拙：

type QueryParams = {
    id: string;
    title: string;
    body: string;
};

然后

static getInitialProps({ query: { id, title, body } }: { query: QueryParams }) {
    return { postId: id, title, body };
}

甚至

type PartialContext = {
    query: {
        id: string;
        title: string;
        body: string;
    };
};

然后

static getInitialProps({ query: { id, title, body } }: PartialContext) {
    return { postId: id, title, body };
}

我应该提到你的 getInitialProps 没有提供 id 道具，但它也没有在你的 Props 类型中列为可选。

请注意，以上所有内容都为 Next.js 将传递给 getInitialProps 的上下文参数提供了类型，但它们没有为 return 的值提供类型getInitialProps。为了完整起见，您可能还想提供它。由于您 returning 只是 Props 的一部分，因此类型将是 Partial<Props>.

因此，例如，使用 QueryParams（上面的中间选项，这是我最喜欢的选项）：

type QueryParams = {
    id: string;
    title: string;
    body: string;
};

然后

static getInitialProps({ query: { id, title, body } }: { query: QueryParams }): Partial<Props> {
// Type of the parameter −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^   ^^^^^^^^^^^^^^−−−− type of the return value
    return { postId: id, title, body };
}

这是与您的代码合并的上述内容：

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

绑定元素 'title' 隐式具有 'any' 类型

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

types

typescript

reactjs

next.js