React组件Props固定属性与索引签名的TS类型定义正确方法

这问题我之前也碰到过，核心原因是当你给接口加上[key: string]: any的索引签名时，TypeScript会把所有属性的类型都降级为any，自然就失去了对prop1、prop2这些已知属性的类型检查。给你几个靠谱的解决方案，按推荐程度排序：

方法1：交叉类型（最推荐） #

把你的自定义Props和一个允许任意额外属性的类型做交叉，这样既能保留已知Props的严格类型检查，又能接受像_myClassName这类自定义属性：

// 先定义明确的基础Props，类型检查严格
interface BaseProps {
  prop1: number;
  prop2: string;
}

// 交叉上Record<string, unknown>，允许任意字符串键的额外属性（用unknown比any更安全）
type Props = BaseProps & Record<string, unknown>;

// 组件示例
const MyComponent = (props: Props) => {
  // 解构出已知Props，剩下的就是自定义属性
  const { prop1, prop2, ...customProps } = props;
  
  // 处理下划线开头的属性转成class
  const classNames = Object.keys(customProps)
    .filter(key => key.startsWith('_'))
    .map(key => key.slice(1).replace(/_/g, '-'))
    .join(' ');

  return <div className={classNames}>{prop1} - {prop2}</div>;
};

// ❌ TS会报错：prop1应该是number类型
<MyComponent prop1="some-string" prop2="test" _myClassName />;

// ✅ 完全符合要求：已知Props类型正确，同时接受自定义属性
<MyComponent prop1={123} prop2="test" _myClassName _another_custom_class />;

这种方式的优势在于，BaseProps的类型检查完全不受影响，同时所有额外属性都能被正常接受，不会触发类型错误。

方法2：兼容式索引签名 #

如果你更习惯用单个接口，可以把索引签名的类型设置为已知属性类型的联合，这样既允许额外属性，又不会丢失对已知Props的检查：

interface Props {
  prop1: number;
  prop2: string;
  // 索引签名的类型是已知属性类型的联合，加上你需要支持的额外属性类型
  [key: string]: number | string | boolean;
}

const MyComponent = (props: Props) => {
  // 同样处理自定义属性
  const { prop1, prop2, ...rest } = props;
  // ...
};

// ❌ 报错：prop1传入字符串不符合number类型
<MyComponent prop1="some-string" prop2="test" _myClassName />;

// ✅ 正确使用
<MyComponent prop1={456} prop2="demo" _myClassName />;

这种方式的局限性是，额外属性的类型必须属于联合类型的一部分，如果需要接受任意类型的额外属性，还是方法1更灵活。

方法3：继承React DOM属性（适用于标准场景） #

如果你的组件是基于某个DOM元素（比如div），并且需要接受该元素的所有标准属性（包括原生的className），可以让Props继承对应的HTML属性接口：

import React from 'react';

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  prop1: number;
  prop2: string;
}

const MyComponent = (props: Props) => {
  return <div {...props}>{prop1} - {prop2}</div>;
};

不过这只适用于接受标准DOM属性的情况，如果你是自定义的_myClassName这类属性，前两种方法更贴合你的需求。

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