How to use the skatejs.Component function in skatejs

}
customElements.define(SkatePark.is, SkatePark);

customElements.define('x-app', class extends skate.Component<{}> {
  render() {
    return (
      <div>
        <h1>app</h1>
        {skate.h('x-countup', { count: 100, obj: { trucks: 'Independent', deck: 'ZERO' } })}
      </div>
    );
  }
});

export type ElmProps = { str: string; arr: any[]; };
class Elem extends skate.Component {
  static get props(): skate.ComponentProps {
    return {
      str: skate.props.string,
      arr: skate.props.array
    }
  }

  str: string;
  arr: string[];

  render() {
    return skate.h('div', {}, 'testing');
  }
}

export type NumLiteral = 123 | 124 | 125;
export type StrLiteral = 'one' | 'two' | 'three';
export type SkateType = { trucks: string, deck: string }
export interface CountUpProps {
  count?: number;
  num?: number,
  numLiteral?: NumLiteral,
  str?: string,
  strLiteral?: StrLiteral,
  bool?: boolean,
  arr?: string[],
  obj?: SkateType,
}

export class CountUpComponent extends skate.Component {
  static get is() { return 'x-countup' }
  static get props(): skate.ComponentProps {
    return {
      count: {
        ...skate.props.number, ...{
          attribute: true,
          default(elem: HTMLElement, data: Object) {
            return 7;
          },
        }
      },
      num: skate.props.number,
      numLiteral: skate.props.number,
      str: skate.props.string,
      strLiteral: skate.props.string,
      bool: skate.props.boolean,

year: skate.props.number,
      halfPipe: skate.props.boolean,
    }
  }
  render({ halfPipe, year }: SkateParkProps) {
    const halfPipeInfo = <span>{halfPipe ? 'has' : 'doesnt have'}</span>;
    return (
      <div>
        <p>Skate park exists since {year} and it {halfPipe} Half-Pipe</p>
      </div>
    )
  }
}
customElements.define(SkatePark.is, SkatePark);

customElements.define('x-app', class extends skate.Component&lt;{}&gt; {
  render() {
    return (
      <div>
        <h1>app</h1>
        {skate.h('x-countup', { count: 100, obj: { trucks: 'Independent', deck: 'ZERO' } })}
      </div>
    );
  }
});

export type ElmProps = { str: string; arr: any[]; };
class Elem extends skate.Component {
  static get props(): skate.ComponentProps {
    return {
      str: skate.props.string,
      arr: skate.props.array