на основе класса Javascript для TypeScript

Question

Я использую Vuejs в машинописи для моего приложения. Я создал слайдер изображений на основе класса javascript. сейчас я хочу преобразовать его в машинописный текст с той же кодовой базой и функциональностью на мой vuejs веб-сайт. Это мой код в javascript:

class Slider {
  constructor() {
    this.el = document.querySelector('.js-slider')
    this.images = [...this.el.querySelectorAll('.js-slide__image')]
    this.contents = [...this.el.querySelectorAll('.js-slide__content')]

    this.data = {
      current: 0,
      last: 0,
      total: this.images.length - 1
    }

    this.state = {
      animating: false
    }

    this.next = this.next.bind(this)
    console.log(this.next.bind(this));

    this.init()
  }

  changeSlide() {
    this.state.animating = true

    const currentImageSlide = this.images[this.data.last]
    const nextImageSlide = this.images[this.data.current]

    const currentContent = this.contents[this.data.last]
    const nextContent = this.contents[this.data.current]

    const currentContentItems = currentContent.querySelectorAll('.js-stagger-item')
    const nextContentItems = nextContent.querySelectorAll('.js-stagger-item')

    const currentImageSlideImg = currentImageSlide.querySelector('img')
    const nextImageSlideImg = nextImageSlide.querySelector('img')

    const tl = new TimelineLite({ paused: true, onComplete: () => { this.state.animating = false }})

    tl
    .set([nextImageSlide, nextContent], {
      autoAlpha: 1,
      zIndex: 2
    })
    .set([currentImageSlide, currentContent], {
      zIndex: 1
    })
    .staggerFromTo(currentContentItems, 0.75, {
      y: 0,
      alpha: 1
    }, {
      y: -30,
      alpha: 0,
      ease: Expo.easeIn
    }, 0.075, 0)
    .fromTo(currentImageSlide, 1.5, {
      yPercent: 0
    }, {
      yPercent: -15,
      ease: Expo.easeInOut
    }, 0)
    .fromTo(nextImageSlide, 1.5, {
      yPercent: 100
    }, {
      yPercent: 0,
      ease: Expo.easeInOut
    }, 0)
    .fromTo(nextImageSlideImg, 1.5, {
      yPercent: -100,
      scale: 1.2
    }, {
      yPercent: 0,
      scale: 1,
      ease: Expo.easeInOut
    }, 0)
    .staggerFromTo(nextContentItems, 1, {
      y: 60,
      alpha: 0
    }, {
      y: 0,
      alpha: 1,
      ease: Expo.easeOut
    }, 0.075, 0.75)
    .set([currentImageSlide, currentContent], {
      autoAlpha: 0
    })

    tl.play()
  }

  next() {
    if (this.state.animating) return

    this.data.last = this.data.current
    this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1

    this.changeSlide()
  }

  addListeners() {
    this.el.addEventListener('click', this.next)
  }

  init() {
    this.addListeners()
  }
}

const slider = new Slider()

в моем коде vuejs, я создал файл .ts скажем Slider.ts и хочу, чтобы этот слайдер работал в машинописи.

my Slider.ts файл выглядит как

import { TimelineMax, Power4, Expo } from 'gsap/all';

const DuelSlider = () => {
  // here wanna write the functionallty for slider in typescript
}

export default DuelSlider;

У вас есть идеи, как мне написать его в машинописи? Заранее спасибо за efford.