绑定元素“title”隐式具有“any”类型答案

【问题标题】：Binding element 'title' implicitly has an 'any' type绑定元素“title”隐式具有“any”类型
【发布时间】：2020-06-19 00:29:13
【问题描述】：

我已经定义了类型，但我仍然收到错误说明：

绑定元素“title”隐式具有“any”类型。

id、title 和 body 在这一行

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

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

【问题讨论】：

标签： reactjs typescript types next.js

【解决方案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 属性，但它也没有在您的 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>
        );
    }
}

【讨论】：

我在 PartialContext 类型中添加了 postId，但它给了我错误说明：Property 'postId' does not exist on type 'Readonly & Readonly'。
@Rebel - 为什么要将postId 添加到PartialContext？你没有收到它。以上所有类型都是针对参数，而不是返回值。
@Rebel - 你没有提到postId 的任何错误。顺便说一句，我更新了答案，提到您可能想提供返回值的类型，并举个例子。
：属性 'postId' 不存在于类型 'Readonly & Readonly'
@Rebel - 你从哪里得到这个错误？这似乎很奇怪，因为你通过Component <Props> 告诉 React 你的 props 类型是什么（请仔细检查你的代码是否真的有这个）。（但同样，这一切似乎与您询问的关于解构参数的隐式任何类型的问题是分开的。）