Typescript

Crie um arquivo adsgram.d.ts e adicione-o à pasta types ou a uma pasta existente de declarações de tipos.

Informação:

Se você usa nossos pacotes npm específicos para frameworks (React ou Vue), o suporte a TypeScript está incluído e não são necessárias declarações de tipos manuais.

Tipagem da API do AdsGram

adsgram.d.ts

export interface ShowPromiseResult {
  done: boolean;
  description: string;
  state: 'load' | 'render' | 'playing' | 'destroy';
  error: boolean;
}

type BannerType = 'RewardedVideo' | 'FullscreenMedia';

interface AdsgramInitParams {
  blockId: string;
  debug?: boolean;
  debugBannerType?: BannerType;
}

type EventType =
  | 'onReward'
  | 'onComplete'
  | 'onStart'
  | 'onSkip'
  | 'onBannerNotFound'
  | 'onNonStopShow'
  | 'onTooLongSession'
  | 'onError';
type HandlerType = () => void;

export interface AdController {
  show(): Promise<ShowPromiseResult>;
  addEventListener(event: EventType, handler: HandlerType): void;
  removeEventListener(event: EventType, handler: HandlerType): void;
  destroy(): void;
}

declare global {
    interface Window {
      Adsgram?: {
        init(params: AdsgramInitParams): AdController;
      };
    }
}

Tipagem para <adsgram-task> em projetos react/preact

Adicione o seguinte código a adsgram.d.ts para descrever os tipos do web component adsgram-task:

adsgram.d.ts (react)

import { DOMAttributes } from "react";

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }> &
  LibraryManagedAttributes;

declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements extends JSXInternal {
      "adsgram-task": CustomElement<HTMLDivElement>;
    }
  }
}

adsgram.d.ts (preact)

import { JSXInternal, LibraryManagedAttributes } from 'preact/src/jsx';
import DOMAttributes = JSXInternal.DOMAttributes;

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }> &
  LibraryManagedAttributes;

declare module "preact/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements extends JSXInternal {
      "adsgram-task": CustomElement<HTMLDivElement>;
    }
  }
}

Não é necessário adicionar estes tipos para vue ou vanilla js.