React+TS开发中如何将自定义Interface正确应用到组件props类型定义

类型定义的放置规则 #

• 单组件使用：如果LinkTabProps仅服务于当前LinkTab组件，直接将接口定义写在组件所在文件的组件代码上方即可，无需额外导入。
• 多文件复用：如果该类型需要在多个组件中使用，可将接口抽离到独立的类型声明文件（如types.ts）中，在组件文件内通过import type { LinkTabProps } from '类型文件相对路径'引入即可。

具体标注写法 #

你只需要把原代码中props:后面内联写的匿名对象类型，替换为自定义的LinkTabProps接口就可以完成类型绑定，完整可运行代码如下：

// 接口定义放在组件上方
interface LinkTabProps {
  label: string;
  href: string;
}

const LinkTab = (props: LinkTabProps) => (
  <Tab
    component="a"
    onClick={(event) => event.preventDefault()}
    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
    {...props}
  />
);

如果你习惯在参数位置直接解构props，写法保持一致：

const LinkTab = ({ label, href, ...rest }: LinkTabProps) => (
  <Tab
    component="a"
    label={label}
    href={href}
    onClick={(event) => event.preventDefault()}
    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
    {...rest}
  />
);

可选优化（针对Material UI场景） #

如果你使用的是Material UI的Tab组件，需要透传Tab原生支持的value、selected、disabled等属性，可以让自定义接口继承Tab的内置Props类型，避免透传属性时触发类型校验错误：

import { Tab, TabProps } from '@mui/material';

// 继承Tab原生属性类型
interface LinkTabProps extends TabProps {
  label: string;
  href: string;
}

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