Question

我正在尝试使用wouter路由库实现history API补丁的方式，但是使用Typescript而不是Javascript。

wouter库使用如下代码：

["pushState", "replaceState"].map(type => {
  const original = history[type];

  history[type] = function() {
    const result = original.apply(this, arguments);
    const event = new Event(type);
    event.arguments = arguments;

    dispatchEvent(event);
    return result;
  };
});

我已改用打字稿：

type WindowHistoryFn =
  (data: any, title: string, url?: (string | null)) => void;

function patchHistoryPushState(){
  const original: WindowHistoryFn = window.history.pushState;

  window.history.pushState = function(data: any, title: string, url?: (string | null)): void{
    const result = original.apply(this, [data, title, url]);
    const event = new Event("pushState");
    // @ts-ignore
    event.arguments = arguments;

    dispatchEvent(event);
    return result;
  };
}

这似乎可行，但我不理解event.arguments = arguments行。

Event类型没有arguments字段。我应该实例化其他类型的Event吗？如何重写上面的Typescript函数以不使用ts-ignore？

Answer 1

由于JavaScript是鸭子类型的，因此您可以添加所需的任何内容。但是在TypeScript世界中，您需要创建自Event扩展的自己的界面，也可以使用CustomEvent。如果您使用CustomEvent，则需要填充detail而不是arguments。

您可以参考https://developer.mozilla.org/en-US/docs/Web/API/Event

打字稿：如何在不使用ts-ignore的情况下修补`history.pushState`？

1 个答案: