记录当前⻚⾯的刷新次数和刷新时的时间，每次刷新都⾃动⾃增⼀次，并显示到⻚⾯中，要求⽤ TypeScript实现

好的，可以使用 TypeScript 实现。首先需要在 HTML 文件中添加一个用于显示刷新次数和时间的元素，比如一个 `div`：

<div id="refresh-info"></div>

然后在 TypeScript 文件中定义一个类，用于记录和显示刷新信息：

class RefreshInfo {
  private count: number = 0;
  private lastRefreshTime: Date = new Date();

  constructor(private element: HTMLElement) {
    this.updateElement();
  }

  refresh() {
    this.count++;
    this.lastRefreshTime = new Date();
    this.updateElement();
  }

  private updateElement() {
    const formattedTime = this.lastRefreshTime.toLocaleTimeString();
    this.element.innerText = `Refresh count: ${this.count}, last refresh time: ${formattedTime}`;
  }
}

这个类有一个 `refresh` 方法，每次调用时会增加计数器和更新最后刷新时间，并调用 `updateElement` 方法更新显示。`updateElement` 方法将计数器和最后刷新时间格式化后，更新到 HTML 元素中。

最后在页面加载完成时，创建一个 `RefreshInfo` 实例并绑定到 HTML 元素上，每次页面刷新时调用 `refresh` 方法即可：

window.onload = () => {
  const refreshInfoElement = document.getElementById('refresh-info');
  const refreshInfo = new RefreshInfo(refreshInfoElement);
  refreshInfo.refresh();
  window.onbeforeunload = () => {
    refreshInfo.refresh();
  };
};

这里使用了 `window.onbeforeunload` 事件，当页面关闭或刷新时会触发，调用 `refresh` 方法更新刷新信息。完整的 TypeScript 代码如下：

class RefreshInfo {
  private count: number = 0;
  private lastRefreshTime: Date = new Date();

  constructor(private element: HTMLElement) {
    this.updateElement();
  }

  refresh() {
    this.count++;
    this.lastRefreshTime = new Date();
    this.updateElement();
  }

  private updateElement() {
    const formattedTime = this.lastRefreshTime.toLocaleTimeString();
    this.element.innerText = `Refresh count: ${this.count}, last refresh time: ${formattedTime}`;
  }
}

window.onload = () => {
  const refreshInfoElement = document.getElementById('refresh-info');
  const refreshInfo = new RefreshInfo(refreshInfoElement);
  refreshInfo.refresh();
  window.onbeforeunload = () => {
    refreshInfo.refresh();
  };
};