feat(angular): better typing

playground/angular/src/app/home/home.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, Component, NgZone, ViewChild } from '@angular/core';
+import Swiper from 'build/swiper';
 import { BehaviorSubject } from 'rxjs';
 import { SwiperComponent } from 'src/angular/src/public-api';
 import SwiperCore, {
@@ -42,12 +43,12 @@ export class HomePage {
     this.slides$.next(Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`));
   }
 
-  thumbsSwiper: any;
-  setThumbsSwiper(swiper) {
+  thumbsSwiper: Swiper;
+  setThumbsSwiper(swiper: Swiper) {
     this.thumbsSwiper = swiper;
   }
-  controlledSwiper: any;
-  setControlledSwiper(swiper) {
+  controlledSwiper: Swiper;
+  setControlledSwiper(swiper: Swiper) {
     this.controlledSwiper = swiper;
   }
 
@@ -91,7 +92,7 @@ export class HomePage {
   slides = Array.from({ length: 5 }).map((el, index) => `Slide ${index + 1}`);
   virtualSlides = Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`);
 
-  log(string) {
+  log(log: string) {
     // console.log(string);
   }
 
@@ -107,7 +108,7 @@ export class HomePage {
 
   slidesEx = ['first', 'second'];
 
-  onSlideChange(swiper) {
+  onSlideChange(swiper: Swiper) {
     if (swiper.isEnd) {
       // all swiper events are run outside of ngzone, so use ngzone.run or detectChanges to update the view.
       this.ngZone.run(() => {

src/angular/src/swiper.component.ts

@@ -17,7 +17,6 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-// @ts-ignore
 import Swiper from 'swiper';
 import { Observable, of, Subject } from 'rxjs';
 import { getParams } from './utils/get-params';
@@ -438,15 +437,17 @@ export class SwiperComponent implements OnInit {
   }
 
   get zoomContainerClass() {
-    return typeof this.zoom !== 'boolean' ? this.zoom.containerClass : 'swiper-zoom-container';
+    return this.zoom && typeof this.zoom !== 'boolean'
+      ? this.zoom.containerClass
+      : 'swiper-zoom-container';
   }
 
-  @HostBinding('class') containerClasses = 'swiper';
+  @HostBinding('class') containerClasses: string = 'swiper';
   constructor(
     private _ngZone: NgZone,
     private elementRef: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Inject(PLATFORM_ID) private _platformId,
+    @Inject(PLATFORM_ID) private _platformId: Object,
   ) {}
 
   private _setElement(el: ElementRef, ref: any, update: string, key = 'el') {
@@ -459,7 +460,7 @@ export class SwiperComponent implements OnInit {
       }
       ref[key] = el.nativeElement;
     }
-    const updateObj = {};
+    const updateObj: { [key: string]: boolean } = {};
     updateObj[update] = true;
     this.updateInitSwiper(updateObj);
   }
@@ -484,15 +485,17 @@ export class SwiperComponent implements OnInit {
   private slidesChanges = (val: QueryList<SwiperSlideDirective>) => {
     this.slides = val.map((slide: SwiperSlideDirective, index: number) => {
       slide.slideIndex = index;
-      slide.classNames = this.slideClass;
+      slide.classNames = this.slideClass || '';
       return slide;
     });
     if (this.loop && !this.loopedSlides) {
       this.calcLoopedSlides();
     }
     if (!this.virtual) {
-      this.prependSlides = of(this.slides.slice(this.slides.length - this.loopedSlides));
-      this.appendSlides = of(this.slides.slice(0, this.loopedSlides));
+      if (this.loopedSlides) {
+        this.prependSlides = of(this.slides.slice(this.slides.length - this.loopedSlides));
+        this.appendSlides = of(this.slides.slice(0, this.loopedSlides));
+      }
     } else if (this.swiperRef && this.swiperRef.virtual) {
       this._ngZone.runOutsideAngular(() => {
         this.swiperRef.virtual.slides = this.slides;
@@ -514,35 +517,42 @@ export class SwiperComponent implements OnInit {
       if (!swiperParams.virtual) {
         swiperParams.observer = true;
       }
-      swiperParams.onAny = (event, ...args) => {
-        const emitter = this[`s_${event}`] as EventEmitter<any>;
+      const getKeyValue =
+        <T extends object, U extends keyof T>(key: U) =>
+        (obj: T) =>
+          obj[key];
+      swiperParams.onAny = (eventName: keyof SwiperComponent, ...args: any[]) => {
+        const emitter = this[('s_' + eventName) as keyof SwiperComponent] as EventEmitter<any>;
         if (emitter) {
           emitter.emit(...args);
         }
       };
-      Object.assign(swiperParams.on, {
-        _containerClasses(swiper, classes) {
-          this.containerClasses = classes;
-        },
-        _slideClasses: (_, updated) => {
-          updated.forEach(({ slideEl, classNames }, index) => {
-            const slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index')) || index;
-            if (this.virtual) {
-              const virtualSlide = this.slides.find((item) => {
-                return item.virtualIndex && item.virtualIndex === slideIndex;
-              });
-              if (virtualSlide) {
-                virtualSlide.classNames = classNames;
-                return;
-              }
+      const _slideClasses: SwiperEvents['_slideClasses'] = (_, updated) => {
+        updated.forEach(({ slideEl, classNames }, index) => {
+          const dataIndex = slideEl.getAttribute('data-swiper-slide-index');
+          const slideIndex = dataIndex ? parseInt(dataIndex) : index;
+          if (this.virtual) {
+            const virtualSlide = this.slides.find((item) => {
+              return item.virtualIndex && item.virtualIndex === slideIndex;
+            });
+            if (virtualSlide) {
+              virtualSlide.classNames = classNames;
+              return;
             }
+          }
 
-            if (this.slides[slideIndex]) {
-              this.slides[slideIndex].classNames = classNames;
-            }
-          });
-          this._changeDetectorRef.detectChanges();
-        },
+          if (this.slides[slideIndex]) {
+            this.slides[slideIndex].classNames = classNames;
+          }
+        });
+        this._changeDetectorRef.detectChanges();
+      };
+      const _containerClasses: SwiperEvents['_containerClasses'] = (_, classes) => {
+        this.containerClasses = classes;
+      };
+      Object.assign(swiperParams.on, {
+        _containerClasses,
+        _slideClasses,
       });
       const swiperRef = new Swiper(swiperParams);
       swiperRef.loopCreate = () => {};
@@ -616,7 +626,7 @@ export class SwiperComponent implements OnInit {
     this._changeDetectorRef.detectChanges();
   }
 
-  updateInitSwiper(changedParams) {
+  updateInitSwiper(changedParams: any) {
     if (!(changedParams && this.swiperRef && !this.swiperRef.destroyed)) {
       return;
     }
@@ -758,17 +768,22 @@ export class SwiperComponent implements OnInit {
       return this.slides.length;
     }
     let loopedSlides = this.loopedSlides || slidesPerViewParams;
+    if (!loopedSlides) {
+      // ?
+      return;
+    }
 
-    loopedSlides += this.loopAdditionalSlides;
-
+    if (this.loopAdditionalSlides) {
+      loopedSlides += this.loopAdditionalSlides;
+    }
     if (loopedSlides > this.slides.length) {
       loopedSlides = this.slides.length;
     }
     this.loopedSlides = loopedSlides;
     return loopedSlides;
   }
 
-  updateParameter(key, value) {
+  updateParameter(key: string, value: any) {
     if (!(this.swiperRef && !this.swiperRef.destroyed)) {
       return;
     }

src/angular/src/utils/get-params.ts

@@ -1,22 +1,20 @@
 // eslint-disable-next-line
 import { isObject, extend } from './utils';
 import { paramsList } from './params-list';
-import { SwiperOptions } from 'swiper/types';
-// @ts-ignore
 import Swiper from 'swiper';
 
 export const allowedParams = paramsList.map((key) => key.replace(/_/, ''));
-export function getParams(obj = {}) {
-  const params: SwiperOptions = {
+export function getParams(obj: any = {}) {
+  const params: any = {
     on: {},
   };
-  const passedParams = {};
+  const passedParams: any = {};
   extend(params, Swiper.defaults);
   extend(params, Swiper.extendedDefaults);
   params._emitClasses = true;
 
-  const rest = {};
-  Object.keys(obj).forEach((key) => {
+  const rest: any = {};
+  Object.keys(obj).forEach((key: string) => {
     const _key = key.replace(/^_/, '');
     if (typeof obj[_key] === 'undefined') return;
     if (allowedParams.indexOf(_key) >= 0) {

src/angular/src/utils/utils.ts

@@ -1,4 +1,4 @@
-export function isObject(o) {
+export function isObject(o: any): boolean {
   return (
     typeof o === 'object' &&
     o !== null &&
@@ -7,7 +7,7 @@ export function isObject(o) {
   );
 }
 
-export function isShowEl(val, obj, el) {
+export function isShowEl(val: any, obj: any, el: any): boolean {
   return (
     (coerceBooleanProperty(val) === true && obj && !obj.el) ||
     !(
@@ -18,7 +18,7 @@ export function isShowEl(val, obj, el) {
   );
 }
 
-export function extend(target, src) {
+export function extend(target: any, src: any) {
   const noExtend = ['__proto__', 'constructor', 'prototype'];
   Object.keys(src)
     .filter((key) => noExtend.indexOf(key) < 0)

src/types/swiper-events.d.ts

@@ -227,14 +227,14 @@ export interface SwiperEvents {
   /**
    * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
    */
-  _slideClass?: (swiper: Swiper, el: HTMLElement, classNames: string) => void;
+  _slideClass?: (swiper: Swiper, slideEl: HTMLElement, classNames: string) => void;
 
   /**
    * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
    */
   _slideClasses?: (
     swiper: Swiper,
-    slides: { el: HTMLElement; classNames: string; index: number }[],
+    slides: { slideEl: HTMLElement; classNames: string; index: number }[],
   ) => void;
 
   /**