のWebPACK + typescriptです：「プロパティ 『jwplayerは、』タイプ」ウィンドウの上に存在しない」スクリプトローダ

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(...) 

このソリューションは、標準Windowインタフェースを強化するためにdeclaration mergingを使用しています。 jwplayerを複数の場所で使用する必要がある場合は、拡張ウィンドウインターフェイスを.d.tsファイルから抽出することを検討してください。