能否仅用TypeScript验证React组件传入的Props合法性？

完全可以仅通过TypeScript实现这类Props的合法性校验，不需要额外编写运行时验证逻辑，关键是要精确定义类型约束，以下是具体实现方案：

• 定义组件与Props的关联映射
  先创建包含所有需管理组件的映射类型，再通过React.ComponentProps提取对应组件的Props类型，确保组件与Props强绑定：

  // 引入需要管理的组件
  import Button from './components/Button';
  import Input from './components/Input';
  
  // 组件映射表，统一管理所有允许传入ComManager的组件
  type ComponentMap = {
    Button: typeof Button;
    Input: typeof Input;
    // 按需添加其他组件
  };
  
  // 定义单个组件项的类型，强制props匹配对应组件的要求
  type ComponentItem<K extends keyof ComponentMap> = {
    component: K;
    props: React.ComponentProps<ComponentMap[K]>;
  };
  

• 约束ComManager的matrix属性类型
  将matrix定义为二维的ComponentItem数组，让TypeScript直接对整个二维数组的每一项进行校验：

  type ComManagerProps = {
    matrix: ComponentItem<keyof ComponentMap>[][];
  };
  
  const ComManager = ({ matrix }: ComManagerProps) => {
    // 渲染逻辑示例
    return (
      <div className="com-manager">
        {matrix.map((row, rowIndex) => (
          <div key={rowIndex} className="com-row">
            {row.map((item, colIndex) => {
              const Component = ComponentMap[item.component];
              return <Component key={colIndex} {...item.props} />;
            })}
          </div>
        ))}
      </div>
    );
  };
  

• 开启TypeScript严格模式
  在tsconfig.json中确保开启strict: true，这会强制TypeScript校验：

  • 组件的必填Props是否缺失
  • 传入的Props类型是否匹配
  • 是否传入了组件未定义的属性

配置完成后，TypeScript会在编译阶段自动拦截所有不合法的Props传入场景，无需额外编写运行时校验代码。

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