TypeScript中如何为部分已知的接口键定义类型？

核心问题分析 #

你原接口的写法存在类型冲突：索引签名[key: string]: string要求所有属性值必须是string，但onChange是函数类型，违反了这个约束。要同时支持固定类型的已知键、动态名称的特定类型键和任意透传props，需要用泛型结合交叉类型实现。

步骤1：定义泛型Props类型 #

通过泛型参数TDataKey指定动态data键的名称，交叉三个部分的类型：

• 固定的onChange属性
• 动态名称的string类型属性
• 任意额外props（用Record<string, unknown>允许任意键值）

import type { ChangeEvent, FC } from 'react';

// 泛型Props类型，TDataKey为动态data键的名称
type ComponentWithHiddenInputProps<TDataKey extends string> = {
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
} & {
  [K in TDataKey]: string;
} & Record<string, unknown>;

步骤2：类型化组件包装器 #

让ComponentWithHiddenInput成为泛型函数，捕获dataKey的具体类型，确保返回的组件能正确推断props类型：

import { useRef } from 'react';

// 封装更新隐藏输入框的逻辑，同时保留原onChange调用
const setHiddenInput = (input: HTMLInputElement | null, originalOnChange: (event: ChangeEvent<HTMLInputElement>) => void) => {
  return (event: ChangeEvent<HTMLInputElement>) => {
    input?.setAttribute('value', event.target.value);
    originalOnChange(event);
  };
};

const ComponentWithHiddenInput = <TDataKey extends string>(component: FC, dataKey: TDataKey) => {
  return (props: ComponentWithHiddenInputProps<TDataKey>) => {
    const { [dataKey]: defaultValue, onChange: originalOnChange, ...restProps } = props;
    const inputRef = useRef<HTMLInputElement>(null);

    return (
      <>
        <input 
          name={dataKey}
          type="hidden" 
          ref={inputRef} 
          defaultValue={defaultValue} 
        />
        {component({ 
          ...restProps, 
          onChange: setHiddenInput(inputRef.current, originalOnChange) 
        })}
      </>
    );
  };
};

关键说明 #

1. 泛型的作用：通过TDataKey捕获动态data键的具体名称，TypeScript会在使用组件时自动校验该键是否存在且类型为string。
2. 避免索引签名冲突：用交叉类型替代单一接口的索引签名，既保留固定属性的类型约束，又支持动态键和任意透传props。
3. 修正原代码问题：原代码中onChange: name的解构逻辑错误，需保留原onChange并包装它；隐藏输入框的name属性用dataKey更符合语义。

使用示例 #

// 原组件示例
const MyInput: FC<{ onChange: (e: ChangeEvent<HTMLInputElement>) => void; userId: string }> = (props) => {
  return <input onChange={props.onChange} defaultValue={props.userId} />;
};

// 生成带隐藏输入的包装组件
const MyInputWithHidden = ComponentWithHiddenInput(MyInput, 'userId');

// 使用时，TypeScript自动校验参数类型
<MyInputWithHidden userId="123" onChange={(e) => console.log(e.target.value)} />

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