Typescript 如何从Next.js正确键入_document.tsx文件？
我从关于如何使用Typescript 如何从Next.js正确键入_document.tsx文件？,typescript,next.js,Typescript,Next.js,我从关于如何使用样式化组件的官方文档示例中获得了大部分代码： 但是这个例子使用了.js，我使用的是Typescript 我得到一些类型错误和警告，我不知道如何正确地键入它。我已经解决了部分问题。这是我仍然缺少的： 错误1:静态异步getInitialProps（ctx）函数的完整签名类型或返回类型应该是什么？ctx参数的类型是什么 错误2:ctx.renderPage上的不安全访问。我想只要我正确地键入getInitialProps函数，这个问题就会得到解决 错误3:这也可能与缺少的
样式化组件的官方文档示例中获得了大部分代码：
但是这个例子使用了.js
，我使用的是Typescript
我得到一些类型错误和警告，我不知道如何正确地键入它。我已经解决了部分问题。这是我仍然缺少的：
错误1:静态异步getInitialProps（ctx）ctx错误2:
ctx.renderPagegetInitialProps错误3:这也可能与缺少的
getInitialProps的类型有关
import React，{ReactElement}来自“React”；
从“next/Document”导入文档，{Html，Head，Main，NextScript}；
从“样式化组件”导入{ServerStyleSheet}；
导出默认类MyDocument扩展文档{
静态异步getInitialProps（ctx）{
const sheet=new ServerStyleSheet（）；
const originalRenderPage=ctx.renderPage；
试一试{
ctx.renderPage=（）=>
原始渲染图({
增强应用程序：（应用程序）=>（道具）=>
sheet.collectStyles（），
});
const initialProps=wait Document.getInitialProps（ctx）；
返回{
…初始道具，
风格：(
{initialProps.style}
{sheet.getStyleElement（）}
),
};
}最后{
表1.seal（）；
}
}
render（）：元素{
返回(
//脑袋里有东西
);
}
}
您需要从next/document导入DocumentContext类型
比如说
导入文档，{DocumentContext}来自“next/Document”；
类MyDoc扩展文档{
静态异步getInitialProps（ctx:DocumentContext）{
const initialProps=wait Document.getInitialProps（ctx）；
返回初始值；
}
render（）{}
}
要了解更多信息，请阅读此处。这是我最后键入getInitialProps
和render
方法的步骤：
import React, { ReactElement } from "react";
import Document, { DocumentInitialProps, DocumentContext } from 'next/document';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
// ...
}
render(): ReactElement {
return(
// ...
);
}
}
谢谢那么退货类型呢？应该是Promise。记住从下一个/文档导入它
import React, { ReactElement } from "react";
import Document, { DocumentInitialProps, DocumentContext } from 'next/document';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
// ...
}
render(): ReactElement {
return(
// ...
);
}
}
import React, { ReactElement } from "react";
import Document, { Html, Head, Main, NextScript, DocumentInitialProps, DocumentContext } from 'next/document';
import { ServerStyleSheet } from "styled-components";
// NEXT.JS CUSTOM DOCUMENT
// https://nextjs.org/docs/advanced-features/custom-document
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render(): ReactElement {
return(
<Html lang="en">
<Head>
// SOME HEAD ELEMENTS
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}