Add Typescript types

[ludovicmnji]

Hi 👋

More and more developper use Typescript to improve the code confidence and to provide a better developper experience (e.g documentation directly inside VS Code).

It could be very interesting to provide Typescript definitions directly inside the react-dfp (thanks to types option in package.json) or at least with @types/react-dfp (which is maybe currently the best option for a library not written in Typescript I think). I started to write some definitions but I don't have plain knowledge of all mechanisms of your library (and I'm a beginner with Typescript).

declare module 'react-dfp' {
  export type GPTEvent = any;

  export interface DFPEventData {
    slotId: string;
    /* Describe the GPT Event data */
    event: GPTEvent;
  }

  export type Size = [number, number] | string;

  export type SizeMapping = Array<{
    viewport: number[];
    sizes: Size[];
  }>;

  export type AdSenseAttributes = {
    [key: string]: any;
  };

  export type TargetingArguments = {
    [key: string]: any;
  };

  export interface AdSlotProps {
    dfpNetworkId?: string;
    adUnit?: string;
    sizes?: Size[];
    renderOutOfThePage?: boolean;
    sizeMapping?: SizeMapping[];
    fetchNow?: boolean;
    adSenseAttributes?: AdSenseAttributes;
    targetingArguments?: TargetingArguments;
    onSlotRender: (dfpEventData: DFPEventData) => void;
    onSlotRegister: (dfpEventData: DFPEventData) => void;
    onSlotIsViewable: (dfpEventData: DFPEventData) => void;
    onSlotVisibilityChanged: (dfpEventData: DFPEventData) => void;
    shouldRefresh?: () => boolean;
    slotId?: string;
    className?: string;
  }

  type LazyLoad = {
    fetchMarginPercent?: number;
    renderMarginPercent?: number;
    mobileScaling?: number;
  };

  export interface DFPSlotsProviderProps {
    children: ReactElement;
    autoLoad?: boolean;
    autoReload?: {
      dfpNetworkId?: boolean;
      personalizedAds?: boolean;
      singleRequest?: boolean;
      disableInitialLoad?: boolean;
      adUnit?: boolean;
      sizeMapping?: boolean;
      adSenseAttributes?: boolean;
      targetingArguments?: boolean;
      collapseEmptyDivs?: boolean;
      lazyLoad?: boolean;
    };
    dfpNetworkId: string;
    personalizedAds?: boolean;
    singleRequest?: boolean;
    disableInitialLoad?: boolean;
    adUnit: string;
    sizeMapping?: SizeMapping;
    adSenseAttributes?: AdSenseAttributes;
    targetingArguments?: TargetingArguments;
    collapseEmptyDivs?: boolean;
    lazyLoad?: boolean | LazyLoad;
  }

  export class DFPManager {
    getGoogletag: () => Promise<any>;

    load: (...slotId: string[]) => void;

    refresh: (...slotId: string[]) => void;

    reload: (...slotId: string[]) => void;

    configureSingleRequest: (enable?: boolean) => void;

    configureLazyLoad: (enable: boolean, config?: LazyLoad) => void;

    singleRequestIsEnabled: () => boolean;

    configurePersonalizedAds: (enable?: boolean) => void;

    setAdSenseAttributes: (adSenseAttributes: AdSenseAttributes) => void;

    getAdSenseAttributes: () => {
      [key: string]: any;
    };

    setAdSenseAttribute: (name: string, value: string) => void;

    getAdSenseAttribute: (name: string) => string;

    setTargetingArguments: (targetingArguments: TargetingArguments) => void;

    setCollapseEmptyDivs: (enable: boolean | null | undefined) => void;
  }

  export class DFPSlotsProvider extends Component<DFPSlotsProviderProps> {}
  export class AdSlot extends Component<AdSlotProps> {}
}

Could you consider to add Typescript types to react-dfp (in the way you prefer)?

[sunpietro]

What is the status of this issue? Is it going to be processed in any way?

[bashkovpd]

Yea, I'm interested in it too.

[jaanauati]

https://github.com/DefinitelyTyped/DefinitelyTyped

[StewartJ-SSG]

Hey, wondering why this was closed? AFAICT there are no types for react-dfp in DefinitelyTyped:

npm install @types/react-dfp -D
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2freact-dfp - Not found
npm ERR! 404
npm ERR! 404  '@types/react-dfp@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

[RayHughes]

Requesting types as well!

[jaanauati]

i'm not sure why this one got closed out, reopening it now.