Typescript NPMモジュールのインポートが失敗しました。

Question

私はTypescriptが比較的新しいです（何年も使っていますが、実際にはいくつかの点については理解していません）。この問題は、NPMのインポートに関連して私を悩ませています。私はdashjsとchartjsのTypescriptでいくつかのWeb NPMモジュールを使用しようとしています。それらをインポートしようとするときには動作せず、ランナースクリプトから参照することもできません。

プログラムファイルはSensedPlaybackクラスを認識できません。これは、何かが正しくコンパイルされていないことを意味しますが、SensedPlaybackのJSファイルはビルドされます。 SenserPlayback.tsファイルの先頭にあるimportを削除すると、プログラムファイルには表示されますが、インポートされたモジュールは機能しません。モジュールのインテリセンスは、SensedPlayback.tsの範囲内で動作し、モジュールのインポートがうまく機能していることを示しています。

任意の助けいただければ幸いです！ （輸入を含む） ジェラルド

{ 
    "compileOnSave": true, 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "moduleResolution": "node", 
    "module": "commonjs", 
    "target": "es6", 
    "outDir": "wwwroot/js/" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

tsconfig.json SensedPlayback.ts

import * as dashjs from "dashjs"; 

namespace TIMINGSRC { 
    export declare var TimingObject: any; 
    export declare var MediaSync: any; 
} 

class SensedPlayback { 
    production: Production; 

    videosDiv: HTMLDivElement; 
    videos: dashjs.MediaPlayerClass[]; 
    seekHead: HTMLInputElement; 
    playBtn: HTMLButtonElement; 
    pauseBtn: HTMLButtonElement; 

    _playbackTimeReciever: PlaybackTimeSync; 

    _timingObject: any; 
    _isSeeking: boolean; 

    constructor(production: Production, videosDiv: HTMLDivElement, seekHead: HTMLInputElement, playBtn: HTMLButtonElement, pauseBtn: HTMLButtonElement) { 
     this.production = production; 

     this.videosDiv = videosDiv; 
     this.seekHead = seekHead; 
     this.playBtn = playBtn; 
     this.pauseBtn = pauseBtn; 

     this._setupPage(); 

     this._playbackTimeReciever = new PlaybackTimeSync(); 
    } 

    start() { 
     this._playbackTimeReciever.subscribe((tr) => { 
      this.loadMediaForTime(tr.start); 
     }); 

     this._playbackTimeReciever.start(); 
    } 

    _setupPage() { 
     this.playBtn.addEventListener('click', (event) => { 
      this._timingObject.update({ velocity: 1.0 }); 
     }); 

     this.pauseBtn.addEventListener('click', (event) => { 
      this._timingObject.update({ velocity: 0.0 }); 
     }); 

     this.seekHead.addEventListener('mousedown', (event) => { 
      this._isSeeking = true; 
     }); 

     this.seekHead.addEventListener('mouseup', (event) => { 
      this._timingObject.update({ position: this.seekHead.value }); 
      this._isSeeking = false; 
     }); 
    } 

    loadMediaForTime(time: Date) { 
     let takes = this.production.takes.filter((t) => { 
      t.media.some((m) => m.startTime >= time 
       && new Date(m.startTime.setMilliseconds(m.startTime.getMilliseconds() + m.duration)) < time) 
     }); 

     let take = takes[0]; 
     this.videos = []; 
     this.videosDiv.innerHTML = ""; 

     for (var m of take.media) { 
      let video = <HTMLVideoElement>(document.createElement("video")); 
      var player = new dashjs.MediaPlayerClass(); 
      player.initialize(video, URL.createObjectURL(`${m.url}/playback.mpd`), false); 

      let wrapper = <HTMLDivElement>(document.createElement("div")); 
      wrapper.classList.add("col-md-4"); 
      wrapper.classList.add("col-sm-6"); 

      let heading = <HTMLHeadingElement>(document.createElement("h4")); 
      heading.innerText = this.production.cameras.find((c) => { return c.id == m.cameraId }).name; 

      wrapper.appendChild(heading); 
      wrapper.appendChild(video); 

      this.videosDiv.appendChild(wrapper); 
      this.videos.push(player); 
     } 

     this._configurePlayers(); 
    } 

    _configurePlayers() { 
     for (var v of this.videos) { 
      v.on('loadstart', function (event) { 
       v.setMaxAllowedBitrateFor('video', 4600); 
      }); 

      v.on('loadedmetadata', (event) => { 
       if (this._timingObject === undefined) { 
        this._timingObject = new TIMINGSRC.TimingObject({ range: [0, event.target.duration] }); 
        this.seekHead.min = '0'; 
        this.seekHead.step = '0.25'; 
        this.seekHead.max = `${v.duration()}`; 
        this._timingObject.on('timeupdate',() => { 
         if (!this._isSeeking) { 
          this.seekHead.value = this._timingObject.clock.now(); 
         } 
        }); 
       } 
       var sync = new TIMINGSRC.MediaSync(event.target, this._timingObject); 
      }); 
     } 
    } 
} 

SensedPlaybackProgram.ts

let videosDiv = <HTMLDivElement>document.getElementById('cameras'); 
let seekHead = <HTMLInputElement>document.getElementById('seekhead'); 
let playBtn = <HTMLButtonElement>document.getElementById('play'); 
let pauseBtn = <HTMLButtonElement>document.getElementById('pause'); 

let production : Production = JSON.parse((<HTMLInputElement>document.getElementById('production')).value); 

let playback = new SensedPlayback(production, videosDiv, seekHead, playBtn, pauseBtn); 

playback.start(); 

Answer 1

あなたはそうではない一連のファイルをコンパイルするときimportまたはexportを使用すると、ファイルaモジュールではないとして扱われ、宣言されたすべてのシンボルはグローバルな空間で終わる。あなたはimport文を削除すると、それがSensedPlayback.ts

で定義されたあなたはSensedPlayback.tsであなたのimportステートメントを追加すると、あなたがあれば、活字体モジュールにそれを回す、とにその後形成されていても、SensedPlaybackProgram.tsはSensedPlaybackを見ることができている理由はここにあります定義したシンボルを使用したい場合は、このモジュールからシンボルをエクスポートし、使用するシンボルをインポートする必要があります。 、

export class SensedPlayback { 
... 

そしてSensedPlaybackProgram.tsにして、それをインポートします：だから持っているSensedPlayback.tsを変更する問題だった

import { SensedPlayback } from "./SensedPlayback"; 

（必要に応じてパスを調整します。）