javascript - Typescript:为通用 React 组件定义未声明的 Prop

Question

我有这个简单的通用 React 组件，我并不总是知道我将使用哪种元素类型或 props，也不想为每个可能的 prop 设置一个接口(interface)。

使用 TS v2.9。

在这种情况下，我使用的是 React Native 而不是 React 不应该是相关的。

import React, { StatelessComponent as SC } from "react";

interface IGenComponentProps {    
  /**
   * Component type
   */
  ComponentName: string;

  /**
   * Test Id used for automation testing
   */
  testId?: string;

  /**
   * I'd like to define this here to supress TS errors I'm getting
   */         
  remainderProps?: any;
}

const GenComponent:SC<IGenComponentProps> = ({ComponentName, testId, children, ...remainderProps}) => {

  return (
    <ComponentName id={testId} {...remainderProps}>
      {children}
    </ComponentName>
  )
}

export default GenComponent;

这很好用并且符合预期，但是我在像这样使用组件时遇到 TS 错误:

   <GenComponent 
      ComponentName={Image}
      testId="test-image"
      source={{uri: 'someImageSrc'}}
      opacity={0.1}
    />

[ts] Property 'source' does not exist on type 'IntrinsicAttributes & IGenComponentProps & { children?: ReactNode; }'.

[ts] Property 'opacity' does not exist on type 'IntrinsicAttributes & IGenComponentProps & { children?: ReactNode; }'.

或:

   <GenComponent
      ComponentName={View}
      testId="left-container"
      accessibilityHint="left-container"
    >
      { someContent }
   </GenComponent>

[ts] Property 'accessibilityHint' does not exist on type 'IntrinsicAttributes & IGenComponentProps & { children?: ReactNode; }'.

Answer 1

如果您希望能够允许具有任何名称的属性而不枚举这些名称，您可以这样做:

interface IGenComponentProps {    
  ComponentName: string;
  testId?: string;
  [key: string]: any;
}

请注意，您将对此进行有限的类型检查。您的 IDE 基本上会强制 ComponentName 存在并且是一个字符串，并且如果 testId 存在则它是一个字符串。其他一切都是免费的，但至少是允许的。