TelegramWebApp.types.ts

export interface WebAppUser {
  id: number;
  is_bot: boolean;
  first_name: string;
  last_name: string;
  username: string;
  language_code: string;
  photo_url: string;
}

export interface WebAppInitData {
  query_id: string;
  user: WebAppUser;
  receiver: WebAppUser;
  start_param: string;
  auth_date: number;
  hash: string;
}

export interface ThemeParams {
  bg_color: string;
  text_color: string;
  hint_color: string;
  link_color: string;
  button_color: string;
  button_text_color: string;
}

export interface MainButtonParams {
  text: string;
  color: string;
  text_color: string;
  is_active: boolean;
  is_visible: boolean;
}

export interface MainButton {
  /**
   * Current button text. Set to CONTINUE by default.
   */
  text: string;

  /**
   * Current button color. Set to `themeParams.button_color` by default.
   */
  color: string;

  /**
   * Current button text color. Set to `themeParams.button_text_color` by default.
   */
  textColor: string;

  /**
   * Shows whether the button is visible. Set to `false` by default.
   */
  isVisible: boolean;

  /**
   * Shows whether the button is active. Set to `true` by default.
   */
  isActive: boolean;

  /**
   * Readonly. Shows whether the button is displaying a loading indicator.
   */
  isProgressVisible: boolean;

  /**
   * A method to set the button text.
   * @param text 
   */
  setText(text: string): void;

  /**
   * A method that sets the button press event handler. An alias for `Telegram.WebApp.onEvent('mainButtonClicked', callback)`
   * @param callback 
   */
  onClick(callback: () => void): void;

  /**
   * A method to make the button visible.
   * Note that opening the Web App from the attachment menu hides the main button until the user interacts with the Web App interface.
   */
  show(): void;

  /**
   * A method to hide the button.
   */
  hide(): void;

  /**
   * A method to enable the button.
   */
  enable(): void;

  /**
   * A method to disable the button.
   */
  disable(): void;

  /**
   * A method to show a loading indicator on the button.
   * It is recommended to display loading progress if the action tied to the button may take a long time. By default, the button is disabled while the action is in progress. If the parameter `leaveActive=true` is passed, the button remains enabled.
   */
  showProgress(leaveActive: boolean): void;

  /**
   * A method to hide the loading indicator.
   */
  hideProgress(): void;

  /**
   * A method to set the button parameters.
   */
  setParams(params: MainButtonParams): void;
}

export type EventType = 'themeChanged' | 'viewportChanged' | 'mainButtonClicked';

export interface WebApp {
  initData: string;
  initDataUnsafe: WebAppInitData;
  colorScheme: string;
  themeParams: ThemeParams;
  isExpanded: boolean;
  viewportHeight: number;
  viewportStableHeight: number;
  MainButton: MainButton;
  onEvent(eventType: EventType, eventHandler: () => void): void;
  offEvent(eventType: EventType, eventHandler: () => void): void;
  sendData<T = object>(data: T): void; 
  ready(): void;
  expand(): void;
  close(): void;
}

interface Window {
  Telegram: {
    WebApp: WebApp;
  }
}