使用 NextJS 打字稿

Question

我一直在努力将 Typescript 与 NextJS 集成，主要是通过 getInitialProps 中的解构参数以及页面函数的类型。例如，这是我的 _app.tsx：

import { ThemeProvider } from 'styled-components';
import App, { Container } from 'next/app';
import Cookie from 'js-cookie';
import React from 'react';

import { CookiesProvider } from '../components/CookiesContext';
import THEME from '../styles/config';

import {
  GlobalStyles,
  Wrapper,
} from './_app.style';

type Props = {
  cookieSettings: {
    functionalOn: string;
    performanceOn: string;
  }
};

class Page extends App<Props> {
  static async getInitialProps({
    Component,
    ctx,
  }) {
    // Get initial page props
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};

    // Get cookies settings
    const cookieSettings = {
      functionalOn: process.browser ? Cookie.get('functionalCookies') : ctx.req.cookies.functionalCookies,
      performanceOn: process.browser ? Cookie.get('performanceCookies') : ctx.req.cookies.performanceCookies,
    };

    return {
      cookieSettings,
      pageProps,
    };
  }

  render() {
    const {
      Component,
      cookieSettings,
      pageProps,
    } = this.props;

    return (
      <Container>
        <ThemeProvider theme={THEME}>
          <CookiesProvider {...cookieSettings}>
            <Wrapper>
              <GlobalStyles />
              <Component {...pageProps} />
            </Wrapper>
          </CookiesProvider>
        </ThemeProvider>
      </Container>
    );
  }
}

export default Page;

我在这里遇到的唯一错误是 Component 和 ctx 参数隐式为“任何”类型。我正在使用 @types/next，以及包含类型的 NextJS 的 v8.1.1.Canary.40，所以我认为这样的东西会被覆盖，但我似乎必须声明它们是我自己的，我没有知道，因为它是第三方软件包。

另外，我有一个这样的页面文件：

import { NextPage } from 'next';
import React, { Fragment } from 'react';

import Metadata from '../components/Metadata';
import withPageError from '../components/PageError/withPageError';

type Props = {
  // TODO: Add props
};

const getInitialProps = async ({ res }) => {
  const page = await getPageData();
  if (!page && res) res.statusCode = 404;
  if (!page) return {};
  return { page };
};

const Page: NextPage<Props> = () => (
  <Fragment>
    <Metadata
      pageDescription="Page"
      pageTitle="Page"
      socialDescription="Page"
      socialTitle="Page"
    />
  </Fragment>
);

Page.getInitialProps = getInitialProps;

export default withPageError(Page);

在这里，我在 Page.getInitialProps 上看到红色波浪线，并出现以下错误：

Type '({ res }: { res: any; }) => Promise<{ page?: undefined; } | { page: any; }>' is not assignable to type '(ctx: NextPageContext) => Promise<Props>'.

也是一个const Page巨大的错误，对我来说没有任何意义。

我在这一切中缺少什么？当然，我不必为大量 NextJS 内容重新声明类型？

Answer 1

应该getInitialProps返回一个Props类型对象。但它返回{ page }并且该属性在Pagepage类型中不存在。