[英]Binding element 'title' implicitly has an 'any' type
我已经定义了类型,但我仍然收到一条错误消息:
绑定元素“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>
)
}
}
由于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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.