Typescript

创建 adsgram.d.ts 文件，并将其添加到 types 文件夹或现有的类型声明文件夹中。

在 TypeScript 中定义 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; // 区块 ID
  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
      };
    }
}

在 react/preact 项目中 <adsgram-task> 的 type 类型

将以下代码添加到 adsgram.d.ts 中，以描述使用 Web 组件 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 无需添加这些类型。