Typescript

أنشئ ملف adsgram.d.ts وأضفه إلى مجلد types أو مجلد موجود لتصريحات الأنواع.

معلومات

إذا كنت تستخدم حزم npm الخاصة بالإطار (React أو Vue)، فإن دعم TypeScript مضمن تلقائياً ولا حاجة لتصريحات أنواع يدوية.

كتابة أنواع AdsGram API

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

كتابة أنواع <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>;
    }
  }
}

لا حاجة لإضافة هذه الأنواع لـ vue أو vanilla js.