How to use the hammerjs.Tap function in hammerjs

_initHammerRecognizers() {
    var hm = this._hammer;
    // double tap
    hm.add(new Tap({
      event: 'doubletap',
      pointers: 1,
      taps: 2,
      time: 250, // def : 250.  Maximum press time in ms.
      interval: 450, // def : 300. Maximum time in ms between multiple taps.
      threshold: 5, // def : 2. While doing a tap some small movement is allowed.
      posThreshold: 50 // def : 30. The maximum position difference between multiple taps.
    }));

    // double tap 2 fingers
    hm.add(new Tap({
      event: 'doubletap2fingers',
      pointers: 2,
      taps: 2,
      time: 250,
      interval: 450,
      threshold: 5,
      posThreshold: 50
    }));

    // pan
    hm.add(new Pan({
      event: 'pan',
      pointers: 0,
      threshold: 0
    }));

_bindEvt: function() {
    var self = this;
    if (self.___isEvtBind) return;
    self.___isEvtBind = true;
    var mc = self.mc = new Hammer.Manager(self.renderTo);
    var tap = new Hammer.Tap();
    var pan = new Hammer.Pan();
    var pinch = new Hammer.Pinch();
    mc.add([tap, pan]);
        // trigger all events
    self.mc.on('panstart pan panend pancancel pinchstart pinchmove pinchend pinchcancel pinchin pinchout', function(e) {
      self.trigger(e.type, e);
    });
        // trigger touch events
    var touchEvents = ['touchstart', 'touchmove', 'touchend', 'touchcancel', 'mousedown'];
    for (var i = 0, l = touchEvents.length; i < l; i++) {
      self.renderTo.addEventListener(touchEvents[i], function(e) {
        self.trigger(e.type, e);
      });
    }
    self.mc.on('tap', function(e) {
      if (e.tapCount == 1) {

// A touch event recognizer that handles
  // touch events only (we know, we can already handle
  // mouse events out of the box)

  var recognizer = new Hammer.Manager(node, {
    inputClass: Hammer.TouchInput,
    recognizers: []
  });


  var tap = new Hammer.Tap();
  var pan = new Hammer.Pan({ threshold: 10 });
  var press = new Hammer.Press();
  var pinch = new Hammer.Pinch();

  var doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });

  pinch.requireFailure(pan);
  pinch.requireFailure(press);

  recognizer.add([ pan, press, pinch, doubleTap, tap ]);

  recognizer.reset = function(force) {
    var recognizers = this.recognizers,
        session = this.session;

    if (session.stopped) {
      return;
    }

    log('recognizer', 'stop');

domEvent.bind(node, 'touchstart', stopMouse, true);
  domEvent.bind(node, 'touchend', allowMouse, true);
  domEvent.bind(node, 'touchcancel', allowMouse, true);

  // A touch event recognizer that handles
  // touch events only (we know, we can already handle
  // mouse events out of the box)

  var recognizer = new Hammer.Manager(node, {
    inputClass: Hammer.TouchInput,
    recognizers: []
  });


  var tap = new Hammer.Tap();
  var pan = new Hammer.Pan({ threshold: 10 });
  var press = new Hammer.Press();
  var pinch = new Hammer.Pinch();

  var doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });

  pinch.requireFailure(pan);
  pinch.requireFailure(press);

  recognizer.add([ pan, press, pinch, doubleTap, tap ]);

  recognizer.reset = function(force) {
    var recognizers = this.recognizers,
        session = this.session;

    if (session.stopped) {

private setupHammer(): void {
        // Pinch to zoom
        const touchManager = new Hammer.Manager(this.canvas, {recognizers: []});
        let lastScale = 1;

        touchManager.add(new Hammer.Pinch());
        touchManager.on("pinch", (e) => {
            this.callListeners("zoom", lastScale/e.scale, this.mousePos);
            lastScale = e.scale;
        });
        touchManager.on("pinchend", (_) => {
            lastScale = 1;
        });

        touchManager.add(new Hammer.Tap());
        touchManager.on("tap", (e) => {
            if (e.pointerType == "mouse")
                return;

            this.onClick(V(e.center.x, e.center.y));
        });
    }

componentDidMount () {
    const {store} = this.context;
    const mc = propagating(new Hammer.Manager(this.base));
    mc.add(new Hammer.Tap);

    mc.on('tap', (e) => {
      store.dispatch({ type: 'SET_MINIMIZE', data: false });
    });
  }
}

var createHammer = function(v) {
      var mc = new Hammer.Manager(v, {})
      var pan = new Hammer.Pan({
        direction: Hammer.DIRECTION_HORIZONTAL,
        threshold: 25
      })
      var tap = new Hammer.Tap({
        domEvents: true
      })
      var swipe = new Hammer.Swipe({
        direction: Hammer.DIRECTION_HORIZONTAL,
        velocity: 0.5,
        threshold: 250
      })

      pan.recognizeWith(swipe)

      mc.add(pan)
      mc.add(tap)
      mc.add(swipe)
      mc.on('swipe panleft panright panend tap', handleHammer)
    }

listeners() {

        var hamster = Hamster(this.canvas)
        hamster.wheel((event, delta) => this.mousezoom(-delta * 50, event))

        var mc = new Hammer.Manager(this.canvas)
        mc.add(new Hammer.Pan())
        mc.add(new Hammer.Tap())
        mc.add(new Hammer.Pinch())
        mc.get('pinch').set({ enable: true })

        mc.on('panstart', event => {
            if (this.cursor.scroll_lock) return
            let tfrm = this.$p.y_transform
            this.drug = {
                x: event.center.x + this.offset_x,
                y: event.center.y + this.offset_y,
                r: this.range.slice(),
                t: this.range[1] - this.range[0],
                o: tfrm ?
                    (tfrm.offset || 0) : 0,
                y_r: tfrm && tfrm.range ?
                    tfrm.range.slice() : undefined
            }

data:      { point: { x, y }, index },
          isRecord:  true
        });

        store.dispatch({
          type: 'POINT_SELECT',
          data: { index, type: 'straight' }
        });

        e.stopPropagation();
    });

    const svg   = this.base.querySelector('#js-svg'),
          svgMc = propagating(new Hammer.Manager(this.base));

    svgMc.add(new Hammer.Tap);
    svgMc.add(new Hammer.Pan);

    svgMc
      .on('tap', (e) => {
        store.dispatch({ type: 'POINT_DESELECT_ALL' });
      })
      .on('pan', (e) => {
        store.dispatch({ type: 'EDITOR_PAN', data: e.deltaY });
      })
      .on('panend', (e) => {
        store.dispatch({ type: 'EDITOR_PAN_END', data: e.deltaY });
      });

  }
}