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

Question

我有我正在编写的涉及graphql、react 和typescript 的代码。 在中途，我收到错误消息Binding element 'posts' 隐含地具有 'any' 类型。 我不知道这意味着什么，需要帮助。 以下是错误来自的代码，谢谢

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import {PostCard, Categories, PostWidget} from '../components'
import {getPosts} from '../services'

export default function Home({posts}) {
  return (
    <div className="container mx-auto px-10 mb-8">
      <Head>
        <title>FTS Blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div  className='lg:col-span-8 col-span-1'>
          {posts.map((post) => <PostCard post={post} key={post.title}/>)}
        </div>
      
        <div className="lg:col-span-4 col-span-1">
          <div className="classname lg:sticky relative top-8">
            <PostWidget />
            <Categories />
          </div>
        </div>
      </div>

    </div>
  )
}

export async function getStaticProps() {
  const posts = (await getPosts()) || []

  return {
    props:{posts}
  }
}

Answer 1

这是来自 Typescript 的错误，让您知道您的道具posts没有定义类型，因此它被假定为类型any 。

您可以通过显式为posts提供any的类型来消除错误，但posts显然应该是基于您拥有的代码上的这一行的数组： posts.map((post) => ...所以您可能想给posts提供any array的类型，如下所示：

export default function Home({posts}: {posts: any[]}) {

Nextjs 有一些关于如何将 getStaticProps 与 Typescript 一起使用的附加信息

Answer 2

我认为您可以简单地使用打字稿中的界面

此语法将解决您的问题：

import type { NextPage } from 'next';

interface HomeProps{
    posts:any[]
}

const Home: NextPage<HomeProps> = ({ posts }) => (
<div className="container mx-auto px-10 mb-8">
    <Head>
        <title>FTS Blog</title>
        <link rel="icon" href="/favicon.ico" />
    </Head>

    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div  className='lg:col-span-8 col-span-1'>
            {posts.map((post) => <PostCard post={post} key={post.title}/>)}
        </div>

        <div className="lg:col-span-4 col-span-1">
            <div className="classname lg:sticky relative top-8">
                <PostWidget />
                <Categories />
            </div>
        </div>
    </div>

</div>
  );

export default Home;

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

问题描述

2 个解决方案

解决方案1
1 2022-05-27 19:56:16

解决方案2
1 已采纳 2022-05-27 20:03:21

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

问题描述

2 个解决方案

解决方案1 1 2022-05-27 19:56:16

解决方案2 1 已采纳 2022-05-27 20:03:21

解决方案1
1 2022-05-27 19:56:16

解决方案2
1 已采纳 2022-05-27 20:03:21