在Next.js中扩展React.FC默认行为的TypeScript实现问题

嘿，我完全懂你现在的困扰——给Next.js的函数组件加自定义静态属性，在TypeScript里直接扩展React.FC确实容易踩坑，我当初刚转TS的时候也碰到过类似问题。咱们一步步来解决：

首先要明确：TypeScript默认不会允许给React.FunctionComponent类型的变量添加额外属性，所以得先定义一个同时包含组件类型和自定义静态属性的类型。

方法一：直接扩展接口并指定组件类型 #

这是最直观的写法，先定义你需要的接口，然后把组件指定为这个接口类型：

import React from 'react';
import Head from 'next/head';

// 定义包含自定义属性的组件接口
interface HeaderTitleComponent extends React.FC {
  headerTitle: string;
}

// 把组件声明为我们自定义的接口类型
const Home: HeaderTitleComponent = () => {
  return (
    <div>
      <Head>
        <title>Home / Twitter</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <p>Hello </p>
      </div>
    </div>
  );
};

// 现在直接赋值静态属性就不会报错了
Home.headerTitle = "Search";

export default Home;

方法二：先用React.FC定义组件，再用类型断言补全属性 #

如果你已经写好了组件，不想改初始的类型声明，可以用类型断言告诉TypeScript这个组件还包含额外属性：

import React from 'react';
import Head from 'next/head';

// 定义联合类型：React函数组件 + 自定义静态属性
type HomeComponent = React.FC & {
  headerTitle: string;
};

// 先按普通React组件定义
const Home: React.FC = () => {
  return (
    <div>
      <Head>
        <title>Home / Twitter</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <p>Hello </p>
      </div>
    </div>
  );
};

// 用类型断言转换后再赋值静态属性
(Home as HomeComponent).headerTitle = "Search";

export default Home;

额外小技巧：如果组件不需要props，可以简化类型 #

如果你的组件不需要接收任何props，甚至可以不用React.FC，直接定义函数类型+静态属性，写法更简洁：

import React from 'react';
import Head from 'next/head';

type HomeComponent = () => React.ReactElement & {
  headerTitle: string;
};

const Home: HomeComponent = () => {
  return (
    <div>
      <Head>
        <title>Home / Twitter</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <p>Hello </p>
      </div>
    </div>
  );
};

Home.headerTitle = "Search";

export default Home;

这样写就能完美实现你要的效果啦——给函数组件加上自定义的headerTitle静态属性，同时符合TypeScript的类型检查要求。

内容的提问来源于stack exchange，提问作者TOLULOPE ADETULA