的WebPack +打字稿：使用腳本裝載機

Question

時，我想提出一個非常基礎的組成部分，看起來到目前爲止遵循「屬性‘jwplayer’不會對類型‘窗口’存在」：

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，請考慮將增強的窗口界面提取爲.d.ts文件