Nextjs：ts（7031）类型错误：绑定元素“组件”隐式具有“任何”类型

【问题标题】：Nextjs: ts(7031) type error: Binding element 'Component' implicitly has an 'any' typeNextjs：ts（7031）类型错误：绑定元素“组件”隐式具有“任何”类型
【发布时间】：2021-08-26 17:42:06
【问题描述】：

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

我知道在 StackOverflow 上的某个地方有现成的答案，但我写这个是为了将来有人可能会更容易遇到这个问题。

【问题讨论】：

标签： reactjs typescript next.js tsx react-tsx

【解决方案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

【讨论】：