typescript - 使用 Typescript 的 GetStaticProps 仅用作箭头函数，而不用作函数声明

Question

在NextJs Docs for GetStaticProps它被写成一个函数声明。如果我尝试像这样输入:

export async function getStaticProps(): GetStaticProps  {

    const db = await openDB();
    const faq = await db.all('SELECT * FROM FAQ ORDER BY createDate DESC');
    return {props: {faq}};

}

它不会工作，编译器告诉我

TS1055: Type 'GetStaticProps' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

另一方面，如果我使用箭头函数表达式，它应该是等价的，但它确实有效:

export const getStaticProps: GetStaticProps = async () => {

    const db = await openDB();
    const faq = await db.all('SELECT * FROM FAQ ORDER BY createDate DESC');
    return {props: {faq}};

}

那么，我是否漏掉了一些明显的东西？还是我被迫使用箭头函数语法？

Answer 1

在第二个代码块中，您将键入完整的 getStaticProps 函数 - 其中包括键入其参数和返回类型。

const getStaticProps: GetStaticProps = async () => { ... }
//                   ^ This refers to the type of the function - params and return type

但是，在第一个代码块中，只输入了 getStaticProps 函数的返回类型。

async function getStaticProps(): GetStaticProps  { ... }
//                              ^ This refers to the return type of the function only

TypeScript 将抛出您看到的错误，因为 GetStaticProps 类型对于函数的返回类型无效。它意味着键入函数本身。

---

要像使用 GetStaticProps 一样在您的第一个代码块中正确键入函数，您可以显式键入函数的参数和返回类型。

import type { GetStaticPropsContext, GetStaticPropsResult } from 'next';

type PageProps = {
    faq: any // Type this property as desired
}

export async function getStaticProps(context: GetStaticPropsContext): Promise<GetStaticPropsResult<PageProps>>  {
    // Rest of the code

    return {
        props: { faq }
    };
}