Here's the equivalent code in TypeScript:

typescriptCopy code
window.addEventListener("message", (event) => {
  if (event.data.imageProps) {
    ImagePopup.showWithProps(event.data.imageProps);
  }
});

interface ImagePopupProps {
  url: string;
  dims?: {
    x?: string | number;
    y?: string | number;
    w?: string | number;
    h?: string | number;
  };
  backgroundColor?: string;
  transitionTime?: number;
}

interface ImagePopup {
  sendToParent: boolean;
  element: HTMLImageElement | null;
  dims: {
    x?: string | number;
    y?: string | number;
    w?: string | number;
    h?: string | number;
  };
  showWithProps(props: ImagePopupProps): void;
}

const ImagePopup: ImagePopup = {
  sendToParent: false,
  element: null,
  dims: {},
  showWithProps(props) {
    if (this.sendToParent) {
      window.top.postMessage({ imageProps: props }, "*");
      return;
    }
    if (window.opener) {
      window.opener.postMessage({ imageProps: props }, "*");
      return;
    }

    const style: { [key: string]: string | number } = {
      position: "fixed",
      zIndex: "999999999999",
    };

    const creatingAnew = !this.element;
    if (creatingAnew) {
      this.element = document.createElement("IMG");
      this.element.src = props.url;
      this.element.onclick = () => {
        this.element.parentNode.removeChild(this.element);
        this.element = null;
        this.dims = {};
      };
    }

    if (props.url) {
      this.element.src = props.url;
    }

    if (props.dims) {
      const width =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;

      const height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;

      if (props.dims.x) {
        style.left =
          typeof props.dims.x === "number"
            ? `${Math.round(props.dims.x * width)}px`
            : props.dims.x;
        this.dims.x = props.dims.x;
      } else {
        style.left = "0";
      }
      if (props.dims.y) {
        style.top =
          typeof props.dims.y === "number"
            ? `${Math.round(props.dims.y * height)}px`
            : props.dims.y;
        this.dims.y = props.dims.y;
      } else {
        style.top = "0";
      }

if (props.dims.w) { style.width = typeof props.dims.w === "number" ? ${Math.round(props.dims.w * width)}px : props.dims.w; this.dims.w = props.dims.w; } if (props.dims.h) { style.height = typeof props.dims.h === "number" ? ${Math.round(props.dims.h * height)}px : props.dims.h; this.dims.h = props.dims.h; } } if (props.backgroundColor) { style.backgroundColor = props.backgroundColor; } if (creatingAnew) { document.body.appendChild(this.element); }

const applyStyles = () => { for (const i in style) { this.element.style[i] = style[i]; } }; if (props.transitionTime && !creatingAnew) { this.element.addEventListener("transitionend", () => {}, false);

javascriptCopy code
this.element.style.transition = `all ${props.transitionTime}s ease-in`;
applyStyles();
const forceReflow = this.element.offsetHeight;

} else { this.element.style.transition = ""; applyStyles(); } }, };

Copy code