How to use the vue-tsx-support.Component function in vue-tsx-support

// #endregion

export interface OptionProps {
  value?: string;
  active?: boolean;
  inverse?: boolean;
  selected?: boolean;
}

export interface OptionEvents {
  onClick: (e: MouseEvent) => void;
  onMouseenter: (e: MouseEvent) => void;
}

@Component
export class Option extends Vue.Component {
  @Prop({ type: String, required: true })
  public readonly value!: string;

  @Prop({ type: Boolean, required: false, default: false })
  private readonly active!: boolean;

  @Prop({ type: Boolean, required: false, default: false })
  private readonly inverse!: boolean;

  public readonly _uid!: number;

  @Inject()
  private readonly select!: Select;

  @Inject('Option.handleClick')
  private readonly handleClick!: (value: string, uid: number) => void;

placeholder?: string;
  readonly?: boolean;
}

export interface TextBoxEvents {
  onInput: string;
  onEnter: KeyboardEvent;
}

export interface TextBoxValueHistory {
  currentPosition: number;
  historyValuePool: string[];
}

@Component
export default class TextBox extends Vue.Component<
  TextBoxProps,
  TextBoxEvents
> {
  public readonly $refs!: {
    tbox: HTMLTextAreaElement;
  };

  @Prop({ type: String, required: false })
  private readonly value!: string;

  private isComposition: boolean = false; // 是否正在输入法输入

  private valueHistory: TextBoxValueHistory = {
    currentPosition: 0,
    historyValuePool: [''],
  };

import '../assets/style/aplayer.scss';

declare global {
  const Hls: typeof _Hls;
}

const instances: APlayer[] = [];
const store = new Store();
let channel: BroadcastChannel | null = null;

if (typeof BroadcastChannel !== 'undefined') {
  channel = new BroadcastChannel('aplayer');
}

@Component({ mixins: [Mixin] })
export default class APlayer extends Vue.Component<
  APlayer.Options,
  APlayer.Events
> {
  public static readonly version: string = APLAYER_VERSION;

  public readonly $refs!: {
    container: HTMLDivElement;
  };

  // #region [只读] 播放器选项
  @Prop({ type: Boolean, required: false, default: false })
  private readonly fixed!: boolean;

  @Prop({ type: Boolean, required: false, default: null })
  private readonly mini!: boolean;

`;

export interface IconProps {
  type: string;
  rotate?: number;
  tabindex?: number;
  disabled?: boolean;
}

export interface IconEvents {
  onClick: (e: MouseEvent) => void;
  onFocus: (e: FocusEvent) => void;
}

@Component
export default class Icon extends Vue.Component {
  @Prop({ type: String, required: true })
  private readonly type!: string;

  @Prop({ type: Number, required: false })
  private readonly rotate!: number;

  private handleClick(e: MouseEvent) {
    this.$emit('click', e);
  }

  private handleFocus(e: FocusEvent) {
    this.$emit('focus', e);
  }

  render() {
    const { type, rotate } = this;

import * as Vue from 'vue-tsx-support';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import Icon from './Icon';

export interface ButtonProps {
  type: string;
  icon: string;
}

export interface ButtonEvents {
  onClick?: MouseEvent;
}

@Component
export default class Button extends Vue.Component {
  @Prop({ type: String, required: true })
  private readonly type!: string;

  @Prop({ type: String, required: true })
  private readonly icon!: string;

  private handleClick() {
    this.$emit('click');
  }

  render() {
    return (

);
  }
}

export interface SelectProps {
  value?: string;
}

export interface SelectEvents {
  onInput: string;
  onSelected: string;
}

@Component
export default class Select extends Vue.Component {
  private readonly keymap = {
    up: () => this.move('up'),
    down: () => this.move('down'),
    enter: () => this.handleClick(this.selectedValue, this.selectedOptionId),
  };

  @Provide()
  private get select() {
    return this;
  }

  @Prop({ type: String, required: false })
  public readonly value!: string;

  public selectedOptionId: number = -1;

import { Prop, Inject, Watch } from 'vue-property-decorator';
import classNames from 'classnames';

export interface PlayListProps {
  visible?: boolean;
  currentMusic: APlayer.Audio;
  dataSource: APlayer.Audio[];
  scrollTop: number;
}

export interface PlayListEvents {
  onChange: (music: APlayer.Audio, index: number) => void;
}

@Component
export default class PlayList extends Vue.Component<
  PlayListProps,
  PlayListEvents
> {
  public readonly $refs!: {
    list: HTMLOListElement;
  };

  @Prop({ type: Boolean, required: false, default: true })
  private readonly visible?: boolean;

  @Prop({ type: Object, required: true })
  private readonly currentMusic!: APlayer.Audio;

  @Prop({ type: Array, required: true })
  private readonly dataSource!: Array;

import * as Vue from 'vue-tsx-support';
import Comopnent from 'vue-class-component';
import { Inject } from 'vue-property-decorator';
import Touch from '@moefe/vue-touch';
import Icon from './Icon';

@Comopnent
export default class Progress extends Vue.Component<{}> {
  public $refs!: {
    progressBar: HTMLElement;
  };

  @Inject()
  private readonly aplayer!: APlayer.Options & {
    currentTheme: string;
    currentLoaded: number;
    currentPlayed: number;
  };

  @Inject()
  private readonly handleChangeProgress!: (
    e: MouseEvent | TouchEvent,
    percent: number
  ) => void;

import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import Mixin from 'utils/mixin';

export interface TouchProps {
  panMoveClass?: string;
}

export interface TouchEvents {
  onPanStart: MouseEvent | TouchEvent;
  onPanMove: MouseEvent | TouchEvent;
  onPanEnd: MouseEvent | TouchEvent;
}

@Component({ mixins: [Mixin] })
export default class Touch extends Vue.Component {
  @Prop({ type: String, required: false })
  private readonly panMoveClass!: string;

  private readonly isMobile!: boolean;

  private isDragMove: boolean = false;

  private get classNames() {
    const { panMoveClass, isDragMove } = this;
    return { [panMoveClass]: isDragMove };
  }

  private get dragStart(): 'touchstart' | 'mousedown' {
    return this.isMobile ? 'touchstart' : 'mousedown';
  }

import * as Vue from 'vue-tsx-support';
import Component from 'vue-class-component';
import { Inject } from 'vue-property-decorator';

export interface CoverEvents {
  onClick?: MouseEvent;
}

@Component
export default class Cover extends Vue.Component<{}, CoverEvents> {
  @Inject()
  private readonly aplayer!: APlayer.Options & {
    options: APlayer.InstallOptions;
    currentTheme: string;
    currentMusic: APlayer.Audio;
  };

  private get style() {
    const { options, currentTheme, currentMusic } = this.aplayer;
    const cover = currentMusic.cover || options.defaultCover;
    return {
      backgroundImage: cover && `url("${cover}")`,
      backgroundColor: currentTheme,
    };
  }