Typescript

Create adsgram.d.ts file and add it to types folder or existing folder with types declarations.

AdsGram API Typing

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'
  | '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;
      };
    }
}

Typing for the <adsgram-task> in react/preact projects

Add the following code to adsgram.d.ts to describe the types for using the 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>;
    }
  }
}

There is no need to add these types for vue or vanilla js.