使用TypeScript在Next.js中使用getInitialProps

Question

从文档,Next.js 5.0公告和互联网上的各种文章看来,Next.js很好地支持TypeScript,很多人都在使用它.

但是这些线程表明getInitialProps,这对Next.js应用程序至关重要,不起作用:

• https://github.com/zeit/next.js/issues/3396
• https://github.com/zeit/next.js/issues/1651
• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/23356

我该如何解决？在类和功能组件中,当我这样做时,ComponentName.getInitialProps = async function() {...}我收到以下错误:

[ts] Property 'getInitialProps' does not exist on type '({ data }: { data: any; }) => Element'.

Answer 1

解决问题的经典方法是声明getInitialProps为静态成员:

class MyComponent extends React.Component<{...}, {}> {

  static async getInitialProps(ctx: any) {
    return {...}
  }

  render() {...}

}

使用无状态组件时,您可以声明一个简单的扩展React.SFC:

interface StatelessPage<P = {}> extends React.SFC<P> {
  getInitialProps?: (ctx: any) => Promise<P>
}

const MyComponent: StatelessPage<{...}> = (...) => ...

MyComponent.getInitialProps = async (ctx) => {...}

Answer 2

自从Next.js现在正式支持TypeScript以来，以上答案已经过时了（此处的公告）

此发行版的一部分是更好的TypeScript类型，其中许多Next.js是用TypeScript本身编写的。这意味着@types/next将不赞成使用该软件包，而应使用官方的Next.js类型。

相反，您应该导入NextPage类型并将其分配给组件。您也可以getInitialProps使用类型进行NextPageContext键入。

import { NextPage, NextPageContext } from 'next';

const MyComponent: NextPage<MyPropsInterface> = props => (
  // ...
)

interface Context extends NextPageContext {
  // any modifications to the default context, e.g. query types
}

MyComponent.getInitialProps = async (ctx: Context) => {
  // ...
  return props
}

Answer 3

Next.js的类型在DefinitelyTyped项目中维护，该项目具有新版本7.0.6。

为了使用新类型，请确保将它们导入项目中：

npm install --save-dev @types/next@7.0.6

这是您键入getInitialProps无状态功能组件的方式：

import { NextFunctionComponent, NextContext } from 'next'

// Define what an individual item looks like
interface IDataObject {
  id: number,
  name: string
}

// Define the props that getInitialProps will inject into the component
interface IListComponentProps {
  items: IDataObject[]
}

const List: NextFunctionComponent<IListComponentProps> = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>
        {item.id} -- {item.name}
      </li>
    ))}
  </ul>
)

List.getInitialProps = async ({ pathname }: NextContext) => {
  const dataArray: IDataObject[] =
    [{ id: 101, name: 'larry' }, { id: 102, name: 'sam' }, { id: 103, name: 'jill' }, { id: 104, name: pathname }]

  return { items: dataArray }
}

export default List

这是您输入getInitialProps课程的方式：

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

// Define what an individual item looks like
interface IDataObject {
  id: number,
  name: string
}

// Define the props that getInitialProps will inject into the component
interface IListClassProps {
  items: IDataObject[]
}

class List extends React.Component<IListClassProps> {
  static async getInitialProps({ pathname }: NextContext) {
    const dataArray: IDataObject[] =
      [{ id: 101, name: 'larry' }, { id: 102, name: 'sam' }, { id: 103, name: 'jill' }, { id: 104, name: pathname }]

    return { items: dataArray }
  }

  render() {
    return (
      <ul>
        {this.props.items.map((item) => (
          <li key={item.id}>
            {item.id} -- {item.name}
          </li>
        ))}
      </ul>
    )
  }
}

export default List

如果您查看DefinitelyTyped中的测试，则可以获取有关如何在Next中使用其他类型的输入的大量见解。