如何基于函数参数动态创建TypeScript接口并实现类型校验？

当然可以实现这个需求！我们可以利用TypeScript的泛型约束，让callWith函数严格校验传入的键和值是否匹配目标回调的参数类型，完全符合你想要的编译时检查效果。

核心实现思路 #

我们需要让callWith的泛型参数捕获键名和对应值的类型，然后约束返回的函数只能接受参数类型包含该键值对的回调。这里是具体的代码：

function callWith<K extends string, V>(key: K, value: V) {
  return <T extends Record<K, V>>(fnWithKeyValue: (arg: T) => void) => {
    // 使用类型断言确保TypeScript识别我们传递的对象符合T的结构
    fnWithKeyValue({ [key]: value } as T);
  };
}

代码解释 #

• K extends string：约束键名必须是字符串类型（符合对象键的常规使用场景）。
• V：捕获传入值的类型，后续会用来匹配回调参数中对应键的类型。
• 返回的泛型函数中，T extends Record<K, V>：要求目标回调的参数类型T必须包含键K，且该键对应的值类型必须是V（或其子类型）。
• { [key]: value } as T：这里的类型断言是安全的，因为我们明确提供了T要求的必填键值对，即使T有其他属性，在你的简化场景下不需要额外处理（如果是React HOC场景，通常会合并其他props）。

完整验证示例 #

结合你给出的测试场景，完整代码如下：

// 你无法控制的回调和接口
interface ValueType { magicValue: number; }
function MyCallback(v: ValueType) {
  console.log(v.magicValue);
}

// 类型安全的callWith实现
function callWith<K extends string, V>(key: K, value: V) {
  return <T extends Record<K, V>>(fnWithKeyValue: (arg: T) => void) => {
    fnWithKeyValue({ [key]: value } as T);
  };
}

// ✅ 编译通过：键'magicValue'匹配ValueType的接口定义
callWith('magicValue', 123)(MyCallback);

// ❌ 编译失败：键'normalValue'不存在于ValueType中，类型不匹配
callWith('normalValue', 123)(MyCallback);

扩展到React HOC场景 #

既然你提到实际需求是React HOC，这里也给出适配的类型安全实现示例：

import React from 'react';

function withDynamicProp<K extends string, V>(propName: K, propValue: V) {
  return <P extends Record<K, V>>(Component: React.ComponentType<P>) => {
    // 返回的组件只需要接收除了动态prop之外的其他props
    return (props: Omit<P, K>) => {
      return <Component {...props} [propName]={propValue} />;
    };
  };
}

// 使用示例
interface MyComponentProps { magicValue: number; name: string; }
const MyComponent = ({ magicValue, name }: MyComponentProps) => (
  <div>{name}: {magicValue}</div>
);

// 增强后的组件不再需要传入magicValue
const EnhancedComponent = withDynamicProp('magicValue', 123)(MyComponent);
<EnhancedComponent name="测试组件" />;

这个HOC同样会在你传入不存在的prop名时触发编译错误，完美满足类型安全的动态属性需求。

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