Робота з TypeScript: Створення оголошення типів AdsGram

Для інтеграції AdsGram з використанням TypeScript створіть файл adsgram.d.ts і додайте його в папку types або існуючу папку з оголошеннями типів.

Інформація

Якщо ви використовуєте наші спеціалізовані npm-пакети для React або Vue, підтримка TypeScript вже вбудована і вам не потрібно вручну оголошувати типи.

Типізація API AdsGram

adsgram.d.ts

export interface ShowPromiseResult {
  done: boolean; // true, якщо реклама додивилася до кінця, інакше false
  description: string; // опис події
  state: 'load' | 'render' | 'playing' | 'destroy'; // поточний стан банера
  error: boolean; // true, якщо сталося подія помилки, інакше false
}

type BannerType = 'RewardedVideo' | 'FullscreenMedia';

interface AdsgramInitParams {
  blockId: string; // унікальний ідентифікатор рекламного блоку
  debug?: boolean; // debug режим (опціонально)
  debugBannerType?: BannerType; // тип тестового банера (опціонально)
}

type EventType =
  | 'onReward' // користувач отримав нагороду за перегляд реклами
  | 'onComplete' // користувач додивився Interstitial банер або закрив його
  | '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; // ініціалізація AdsGram
      };
    }
}

Типізація веб-компонента <adsgram-task> для проектів на react/preact

Додайте наступний код в adsgram.d.ts, щоб описати типи для використання веб-компонента <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>;
    }
  }
}

Примітки

• Типи подій (EventType):
  Ці типи описують події, на які можна підписатися за допомогою методу addEventListener.
• Глобальне оголошення (global):
  Вказує, що Adsgram доступний в глобальному об'єкті window.
• Типізація веб-компонента:
  Дозволяє використовувати <adsgram-task> з коректними типами.