How to use the aurelia.customElement function in aurelia

import { customElement } from 'aurelia';
import template from './app.html';
import { loader } from 'pixi.js';

interface ISprite {
  src: string;
  entropy?: number;
  x?: number;
  y?: number;
  anchor?: { x: number; y: number };
  scale?: { x: number; y: number };
  width?: number;
}

@customElement({ name: 'app', template })
export class App {
  public sprites: ISprite[];
  public timestamp: number;
  public constructor() {
    this.timestamp = 0;
    this.sprites = [];
  }

  public beforeBind(): void {
    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
    loader.add('logo', require('img/aurelia-icon-256x256.png'));
    loader.load();

    for (let i = 0; i < 50; ++i) {
      this.addSprite();
    }

import { customElement } from 'aurelia';
import template from './app.html';

@customElement({ name: 'app', template })
export class App {
  // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility, @typescript-eslint/typedef
  message = 'Hello World!';
}

import { customElement } from 'aurelia';
import template from './app.html';

@customElement({ name: 'app', template })
export class App {
  public message = 'Hello World!';
}