webpack + typescript：当使用脚本加载器时，“属性'jwplayer'在类型'Window'上不存在”

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加载的，我可以假设它存在于窗口对象上。

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

Answer 1

TypeScript默认只知道标准window属性，所以你必须告诉它有关任何非标准全局变量，例如jwplayer。这应该这样做：

interface Window {
    jwplayer: any;
}


window.jwplayer(...)

此解决方案使用declaration merging来扩充标准Window接口。如果您需要在多个地方使用jwplayer，请考虑将扩充的Window界面提取到.d.ts文件

Answer 2

您需要为jwplayer安装Typescript定义：

npm i @types/jwplayer

然后使用

jwplayer(ele).setup(...)