时间戳

首页 > 解决方案 > 如何在 next.js 中使用带有 typescript 的 express res.locals

javascript - 如何在 next.js 中使用带有 typescript 的 express res.locals

问题描述

我在我的应用程序中使用 express - next.js 并且我通过res.locals从服务器将一些配置传递给客户端，我的项目在打字稿中，我使用 "@types/next": "^8.0. 6"。

问题：打字稿说"Property 'locals' does not exist on type 'ServerResponse | Partial<ServerResponse>'."

预期答案： - 一种将“NextContext.res”或“NextResponse”覆盖为等于Express.res而不是http.ServerResponse - 一种覆盖 NextResponse 以添加的方法locals: any | {x:strong}。

这是我们所拥有的以及如何重现的简化示例：

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';

type Props = {
  locals: {};
}

export default class MyDocument extends Document<Props> {
  render() {
    const { locals } = this.props;

    return (
      <html>
        <Head>
          <ComponentUsingLocalsInfo locals={locals} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const { locals } = ctx.res;
  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    locals,
  }
}

标签： javascriptreactjstypescriptexpress

解决方案

对于一个快速的解决方案，这对我有用：

    import { Response } from 'express';

    MyDocument.getInitialProps = async (ctx) => {

        const { locals } = (ctx.res as Response);

    }

推荐阅读