fix(overlays): typescript is our friend

By using typescript generics we are able to detect at
compiler time that the overlay options conform with the
overlay implementation.

packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -48,7 +48,7 @@ export class ActionSheetController implements OverlayController {
    * Get the most recently opened action sheet overlay.
    */
   @Method()
-  getTop() {
+  getTop(): HTMLIonActionSheetElement {
     return getTopOverlay(this.actionSheets);
   }
 }

packages/core/src/components/alert-controller/alert-controller.tsx

@@ -37,7 +37,7 @@ export class AlertController implements OverlayController {
    * Dismiss the open alert overlay.
    */
   @Method()
-  dismiss(data?: any, role?: any, alertId = -1) {
+  dismiss(data?: any, role?: string, alertId = -1) {
     return dismissOverlay(data, role, this.alerts, alertId);
   }
 
@@ -45,7 +45,7 @@ export class AlertController implements OverlayController {
    * Get the most recently opened alert overlay.
    */
   @Method()
-  getTop() {
+  getTop(): HTMLIonAlertElement {
     return getTopOverlay(this.alerts);
   }
 }

packages/core/src/components/modal-controller/modal-controller.tsx

@@ -37,7 +37,7 @@ export class ModalController implements OverlayController {
    * Dismiss the open modal overlay.
    */
   @Method()
-  dismiss(data?: any, role?: any, modalId = -1) {
+  dismiss(data?: any, role?: string, modalId = -1) {
     return dismissOverlay(data, role, this.modals, modalId);
   }
 

packages/core/src/components/modal/modal.tsx

@@ -250,7 +250,7 @@ export interface ModalOptions {
   showBackdrop?: boolean;
   enableBackdropDismiss?: boolean;
   enterAnimation?: AnimationBuilder;
-  exitAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
   cssClass?: string;
   delegate?: FrameworkDelegate;
 }

packages/core/src/components/picker-controller/picker-controller.tsx

@@ -37,7 +37,7 @@ export class PickerController implements OverlayController {
    * Dismiss the open picker overlay.
    */
   @Method()
-  dismiss(data?: any, role?: any, pickerId = -1) {
+  dismiss(data?: any, role?: string, pickerId = -1) {
     return dismissOverlay(data, role, this.pickers, pickerId);
   }
 
@@ -45,7 +45,7 @@ export class PickerController implements OverlayController {
    * Get the most recently opened picker overlay.
    */
   @Method()
-  getTop() {
+  getTop(): HTMLIonPickerElement {
     return getTopOverlay(this.pickers);
   }
 }

packages/core/src/components/popover-controller/popover-controller.tsx

@@ -36,7 +36,7 @@ export class PopoverController implements OverlayController {
    * Dismiss the open popover overlay.
    */
   @Method()
-  dismiss(data?: any, role?: any, popoverId = -1) {
+  dismiss(data?: any, role?: string, popoverId = -1) {
     return dismissOverlay(data, role, this.popovers, popoverId);
   }
 
@@ -44,7 +44,7 @@ export class PopoverController implements OverlayController {
    * Get the most recently opened popover overlay.
    */
   @Method()
-  getTop() {
+  getTop(): HTMLIonPopoverElement {
     return getTopOverlay(this.popovers);
   }
 }

packages/core/src/components/popover/popover.tsx

@@ -270,7 +270,7 @@ export interface PopoverOptions {
   enableBackdropDismiss?: boolean;
   translucent?: boolean;
   enterAnimation?: AnimationBuilder;
-  leavenimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
   cssClass?: string;
   ev: Event;
   delegate?: FrameworkDelegate;

packages/core/src/components/toast-controller/toast-controller.tsx

@@ -37,7 +37,7 @@ export class ToastController implements OverlayController {
    * Dismiss the open toast overlay.
    */
   @Method()
-  dismiss(data?: any, role?: any, toastId = -1) {
+  dismiss(data?: any, role?: string, toastId = -1) {
     return dismissOverlay(data, role, this.toasts, toastId);
   }
 
@@ -45,7 +45,7 @@ export class ToastController implements OverlayController {
    * Get the most recently opened toast overlay.
    */
   @Method()
-  getTop() {
+  getTop(): HTMLIonToastElement {
     return getTopOverlay(this.toasts);
   }
 }

packages/core/src/components/toast/toast.tsx

@@ -257,7 +257,7 @@ export interface ToastOptions {
   position?: string;
   translucent?: boolean;
   enterAnimation?: AnimationBuilder;
-  exitAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
 }
 
 export interface ToastEvent extends CustomEvent {

packages/core/src/utils/overlays.ts

@@ -1,28 +1,23 @@
 
-export const BACKDROP = 'backdrop';
-
-export interface OverlayInterface {
-  overlayId: number;
-
-  present(): Promise<void>;
-  dismiss(data?: any, role?: string): Promise<void>;
-}
-
-export interface HTMLIonOverlayElement extends HTMLStencilElement, OverlayInterface {}
-
-export type OverlayMap = Map<number, HTMLIonOverlayElement>;
-
 let lastId = 1;
 
-export function createOverlay<T extends HTMLIonOverlayElement>
+/**
-(tagName: string, opts: any): Promise<T> {
+ * Make all properties in T readonly
+ */
+export type PropDescriptions<K extends string> = {
+  [P in K]: any;
+}
+
+
+export function createOverlay<T extends HTMLIonOverlayElement & PropDescriptions<keyof B>, B>
+(tagName: string, opts: B): Promise<T> {
   // create ionic's wrapping ion-alert component
   const element = document.createElement(tagName) as T;
 
   // give this alert a unique id
   element.overlayId = lastId++;
 
-  // convert the passed in alert options into props
+  // convert the passed in overlay options into props
   // that get passed down into the new alert
   Object.assign(element, opts);
 
@@ -33,7 +28,7 @@ export function createOverlay<T extends HTMLIonOverlayElement>
   return element.componentOnReady();
 }
 
-export function dismissOverlay(data: any, role: any, overlays: OverlayMap, id: number): Promise<void> {
+export function dismissOverlay(data: any, role: string, overlays: OverlayMap, id: number): Promise<void> {
   id = id >= 0 ? id : getHighestId(overlays);
   const overlay = overlays.get(id);
   if (!overlay) {
@@ -42,13 +37,13 @@ export function dismissOverlay(data: any, role: any, overlays: OverlayMap, id: n
   return overlay.dismiss(data, role);
 }
 
-export function getTopOverlay(overlays: Map<number, any>) {
+export function getTopOverlay<T extends HTMLIonOverlayElement>(overlays: OverlayMap): T {
-  return overlays.get(getHighestId(overlays));
+  return overlays.get(getHighestId(overlays)) as T;
 }
 
-export function getHighestId(overlays: Map<number, any>) {
+export function getHighestId(overlays: OverlayMap) {
   let minimum = -1;
-  overlays.forEach((_, id: number) => {
+  overlays.forEach((_, id) => {
     if (id > minimum) {
       minimum = id;
     }
@@ -57,6 +52,20 @@ export function getHighestId(overlays: Map<number, any>) {
 }
 
 export function removeLastOverlay(overlays: OverlayMap) {
-  const toRemove = getTopOverlay(overlays);
+  const toRemove = getTopOverlay(overlays) as any;
   return toRemove ? toRemove.dismiss() : Promise.resolve();
 }
+
+export interface OverlayInterface {
+  overlayId: number;
+
+  present(): Promise<void>;
+  dismiss(data?: any, role?: string): Promise<void>;
+}
+
+
+export interface HTMLIonOverlayElement extends HTMLStencilElement, OverlayInterface {}
+
+export type OverlayMap = Map<number, HTMLIonOverlayElement>;
+
+export const BACKDROP = 'backdrop';