Nextjs: ts(7031) type error: Binding element 'Component' implicitly has an 'any' type

Question

这是我在将 NextJS 项目转换为 TypeScript 时遇到的问题。在我的 _app.tsx 中，我得到了一个类型错误：Binding element 'pageProps' implicitly has an 'any' type. ts(7031)。错误可能如下所示：

我知道 Whosebug 上的某个地方已经有了这方面的答案，但我写这篇文章是为了让将来的人更容易遇到这个问题。

Answer 1

解决这个问题很简单。 NextJS 导出一个自定义类型来解决这个问题：AppProps。可以这样导入：

import { AppProps } from 'next/app';

要应用该类型，您可以重新格式化来自

的道具

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

到

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最终产品应该是这样的，假设一个未修改的 _app.tsx 文件：

import { AppProps } from 'next/app';

import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

Nextjs: ts(7031) type error: Binding element 'Component' implicitly has an 'any' type

Nextjs: ts(7031) type error: Binding element 'Component' implicitly has an 'any' type

typescript

reactjs

tsx

next.js

react-tsx