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

Question

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

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

在这一行的 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道具，但它也没有在你的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>
        );
    }
}