如何在 Next.js 的组件外创建静态函数？

Question

当我阅读Next.js 中的 Persistent Layout Patterns文章时，有一部分我无法理解。

// /pages/account-settings/basic-information.js
import SiteLayout from '../../components/SiteLayout'
import AccountSettingsLayout from '../../components/AccountSettingsLayout'

const AccountSettingsBasicInformation = () => <div>{/* ... */}</div>

AccountSettingsBasicInformation.getLayout = page => (
  <SiteLayout>
    <AccountSettingsLayout>{page}</AccountSettingsLayout>
  </SiteLayout>
)

export default AccountSettingsBasicInformation

在选项 4 中，静态函数 getLayout 添加到AccountSettingsBasicInformation 。

然而AccountSettingsBasicInformation是一个组件而不是一个对象。

是否可以像这样在组件中添加静态函数？

我还创建了测试组件来测试它，但我收到了打字稿错误说

“FC”类型不存在属性“hello”。

interface ITestProps {
  hello: () => void;
}

const Test: React.FC<ITestProps> = () => {
  return <TestFilter />;
};

Test.hello = () => { <div> this is a test </div> } // Test.hello occurs the error

export default Test;

我在 ITestProps 声明了 hello 类型，但为什么我收到错误？

Answer 1

除了基本类型之外的任何东西都是对象，包括 es6 类和函数。

但是打字稿有能力强制执行对象具有的属性，

所以你可以说AccountSettingsBasicInformation.getLayout因为 AccountSettingsBasicInformation 没有类型声明，打字稿认为它是 any（包括基本类型和具有任何属性的对象）

但是您将Test声明为React.FC<ITestProps>因此打字稿强制其属性与React.FC<ITestProps>相同，因此它会打印出错误