React Native FBAds原生广告TypeScript高阶组件类型定义问题

Let's break down the issues in your current type definitions and fix them to match your core requirement:

Key Issues in Your Original Code #

1. Incorrect type for IWithManger.adsManager: You had NativeAd here, but it should be NativeAdsManager — the HOC injects the ad manager, not the ad itself.
2. Using Component instead of ComponentClass: The withNativeAd HOC accepts a component class constructor, not a component instance. Using Component (which represents the instance type) caused the "Property 'setState' is missing" error.
3. Flawed prop transformation: Your generic typing didn't properly remove nativeAd from the input component's props and inject adsManager for the output component.
4. Typo in NativeAd: Fixed decription to description for type safety.

Corrected Type Definitions #

declare module 'react-native-fbads' {
  import { ComponentClass } from 'react';

  export class NativeAdsManager {
    constructor(placementId: string, numberOfAdsToRequest: number);
  }

  export interface NativeAd {
    icon?: string;
    coverImage?: string;
    title?: string;
    subtitle?: string;
    description?: string;
    callToActionText?: string;
    socialContext?: string;
  }

  // Props injected by the HOC into your wrapped component
  interface NativeAdInjectedProps {
    nativeAd: NativeAd;
  }

  // Required props to render the HOC-wrapped component
  interface AdsManagerRequiredProps {
    adsManager: NativeAdsManager;
  }

  /**
   * HOC that injects a `nativeAd` prop into the wrapped component,
   * using the provided `adsManager` to fetch ad data.
   * Accepts a component expecting custom props + `nativeAd`,
   * Returns a component expecting custom props (without `nativeAd`) + `adsManager`
   */
  export function withNativeAd<Props extends NativeAdInjectedProps>(
    Component: ComponentClass<Props>
  ): ComponentClass<Omit<Props, keyof NativeAdInjectedProps> & AdsManagerRequiredProps>;
}

Key Improvements Explained #

• ComponentClass for constructor types: This matches what typeof AdComponent resolves to (a class constructor, not an instance), eliminating the original type error.
• Omit for prop transformation: Omit<Props, keyof NativeAdInjectedProps> removes the nativeAd prop from the input component's props, while we add adsManager as the new required prop for the output component.
• Clear interface separation: Splitting injected/required props into dedicated interfaces makes the type definitions easier to read and maintain.

Updated Usage Example #

Your component code will now work without errors, and TypeScript will enforce correct prop passing for the wrapped component:

import * as React from 'react';
import { View } from 'react-native';
import { NativeAd, withNativeAd, NativeAdsManager } from 'react-native-fbads';

interface IProps {
  myProp: number;
  nativeAd: NativeAd;
}

class AdComponent extends React.Component<IProps> {
  public render() {
    return (
      <View>
        {/* Access injected nativeAd prop here */}
        {this.props.nativeAd.title && <Text>{this.props.nativeAd.title}</Text>}
      </View>
    );
  }
}

const WrappedAdComponent = withNativeAd(AdComponent);

// Initialize your ads manager
const adsManager = new NativeAdsManager('your-placement-id', 5);

// Valid usage: only pass custom props + adsManager
<WrappedAdComponent myProp={42} adsManager={adsManager} />

// TypeScript will throw an error for invalid usage:
// <WrappedAdComponent myProp={42} nativeAd={...} />

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