How to use the skatejs.props function in skatejs

};
      render() {
        return h('div', {}, `Hello, ${this.name}`);
      }
    }
  );
}
{
  // https://github.com/skatejs/skatejs#counter
  customElements.define(
    'x-counter',
    class extends Component<{ count: number }> {
      static props: ComponentProps = {
        // By declaring the property an attribute, we can now pass an initial value
        // for the count as part of the HTML.
        count: { ...skate.props.number, ...{ attribute: true } }
      };

      count: number;
      intervalID?: NodeJS.Timer;

      connected() {
        // We use a symbol so we don't pollute the element's namespace.
        this.intervalID = setInterval(() => ++this.count, 1000);
      }
      disconnected() {
        // If we didn't clean up after ourselves, we'd continue to render
        // unnecessarily.
        if (this.intervalID) {
          clearInterval(this.intervalID);
        }
      }

for (let name in previousProps) {
          if (previousProps[name] !== (this as any)[name]) {
            return true;
          }
        }

        return false;
      }
    }
  );

  type ElemProps = { str: string; arr: string[] };
  class Elem extends Component {
    static props: ComponentProps = {
      str: skate.props.string,
      arr: skate.props.array
    };

    str: string;
    arr: string[];

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

  customElements.define('x-element', Elem);

  const elem = new Elem();

  // Re-renders:
  elem.str = 'updated';

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,
      arr: skate.props.array,
      obj: skate.props.object,
    }
  }

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,
      arr: skate.props.array,
      obj: skate.props.object,
    }
  }

static get props(): skate.ComponentProps {
    return {
      str: skate.props.string,
      arr: skate.props.array
    }
  }

static get props(): skate.ComponentProps {
    return {
      year: skate.props.number,
      halfPipe: skate.props.boolean,
    }
  }
  render({ halfPipe, year }: SkateParkProps) {