javascript - webpack + typescript : "Property ' jwplayer' does not exist on type 'Window' "when using script-loader

Question

我正在制作一个相当基本的组件，到目前为止看起来如下:

import * as React from 'react';
import 'lib/jwplayer-7.7.4/jwplayer.js';

interface Props {
  src: string,
};

export default class ShiftPlayer extends React.Component<Props> {
  element: HTMLDivElement = null;

  componentDidMount() {
    const { src, ...props } = this.props;
    window.jwplayer(this.element).setup({
      file: src,
      ...props,
    });
  }

  render() {
    return (
      <div
        ref={(el) => {
          this.element = el;
        }}
      />
    );
  }
}

但是，这在我的 IDE (VSCode) 中始终显示错误:

由于库是通过 script-loader 加载的，我可以假设它存在于 window 对象上。

这是为什么？这应该如何解决？

Answer 1

默认情况下，TypeScript 只知道标准的 window 属性，所以你必须告诉它任何非标准的全局变量，比如 jwplayer。应该这样做:

interface Window {
    jwplayer: any;
}


window.jwplayer(...)

此解决方案使用 declaration merging扩充标准 Window 界面。如果需要在多个地方使用jwplayer，可以考虑将增强的Window界面提取到一个.d.ts文件