reactjs - 绑定(bind)元素 'title' 隐式具有 'any' 类型

Question

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

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

在这一行的 id、title 和 body

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

这是我的代码:
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>
    )
  }
}

Answer 1

自 getInitialProps 不属于 Component ，没有什么会告诉 TypeScript 它将接收或返回什么，所以你必须这样做。

看起来您希望查询字符串包含 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 Prop ，但它没有在您的 Props 中列为可选类型，要么。

请注意，以上所有内容都为 Next.js 将传递给 getInitialProps 的上下文参数提供了一个类型。 ，但他们没有为 getInitialProps 的返回值提供类型.为了完整起见，您可能还想提供它。由于您返回的只是 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>
        );
    }
}