在Custom Next.js应用程序组件中没有继承React道具

Question

我创建了自定义的next.jsApp组件作为一个类(目的是通过初始化Google分析来覆盖componentDidMount函数(。

class MyApp extends App {
async componentDidMount(): Promise<void> {
await initializeAnalytics();
}
render() {
const {Component, pageProps} = this.props;
return (
<Container>
<Component {...pageProps} />
</Container>
);
}
};

tsconfig.json

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es2015.promise", "dom"],
"noImplicitAny": true,
"noImplicitReturns": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"jsx": "react",
"baseUrl": ".",
"skipLibCheck": true,
"paths": {
"@myapp/*": ["./node_modules"]
}
}
}

我面临的问题是error TS2339: Property 'props' does not exist on type MyApp。

props字段应继承自定义为：的App组件

export default class App<P = {}, CP = {}, S = {}> extends React.Component<P & AppProps<CP>, 
S> {
static origGetInitialProps: typeof appGetInitialProps;
static getInitialProps: typeof appGetInitialProps;
componentDidCatch(error: Error, _errorInfo: ErrorInfo): void;
render(): JSX.Element;
}

为什么编译器抱怨MyApp组件上缺少props字段？难道它不应该继承自扩展React.Component的App组件吗？

使用版本：

• 打字4
• Next.js 10.0.0
• 反应17.0.0
• @类型/反应17.0.0

Answer 1

您需要在tsconfig.json文件的compilerOptions下添加"esModuleInterop": true。

我还建议您使用"jsx": "preserve"来避免其他与React相关的问题。

Answer 2

要使用this.props，props应该是myApp类中的一个方法。因此CCD_ 15不存在，因为编译器发出信号