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

Question

I have this code I'm writing that involves graphql, react and typescript.我有我正在编写的涉及graphql、react 和typescript 的代码。 Halfway in and I'm getting the error message Binding element 'posts' implicitly has an 'any' type.在中途，我收到错误消息Binding element 'posts' 隐含地具有 'any' 类型。 I have no idea what this means and need help.我不知道这意味着什么，需要帮助。 Below is the code where the error is coming from, thanks以下是错误来自的代码，谢谢

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

This is an error from Typescript letting you know that your prop posts does not have a type defined, so it is being assumed to be the type, any .这是来自 Typescript 的错误，让您知道您的道具posts没有定义类型，因此它被假定为类型any 。

You can make the error go away by explicitly giving posts the type of any , but posts is clearly supposed to be an array based on this line on code you have: posts.map((post) => ... . So you probably want to give posts the type of an any array like this:您可以通过显式为posts提供any的类型来消除错误，但posts显然应该是基于您拥有的代码上的这一行的数组： posts.map((post) => ...所以您可能想给posts提供any array的类型，如下所示：

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

Nextjs has some additional info about how to use getStaticProps with Typescript Nextjs 有一些关于如何将 getStaticProps 与 Typescript 一起使用的附加信息

Answer 2

I think you can simply use the interface in typescript我认为您可以简单地使用打字稿中的界面

this syntax will solve your problem:此语法将解决您的问题：

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