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参数隐式为“ any”类型。我正在使用@ 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 }，并且属性page在 Page 类型中不存在。

Answer 2

你只需要像这样输入 getInitialProps：

import React from 'react'
import { NextPageContext } from 'next'

interface Props {
  userAgent?: string;
}

export default class Page extends React.Component<Props> {
  static async getInitialProps({ req }: NextPageContext) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

  render() {
    const { userAgent } = this.props
    return <main>Your user agent: {userAgent}</main>
  }
}

Next.js 文档 - https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

使用NextJS的打字稿

2 个答案: