typescript - typescript NPM模块导入导致引用失败

我对typescript比较陌生（好吧，我多年来一直在尝试使用它，但从未真正理解过某些方面）。这个问题已经困扰了我一段时间与NPM进口有关。我试图在typescript中为dashjs和chartjs使用一些web npm模块。在尝试导入它们并从运行程序脚本引用它们时，两者都不起作用。
程序文件似乎看不到sensedplayback类，这意味着有些东西没有正确编译，但是sensedplayback的js文件生成了。删除sensedplayback.ts文件顶部的import可以让程序文件看到它，但是导入的模块无法工作。模块的intellisense在SensedPlayback.ts内工作，表明模块导入工作正常。

任何帮助都将不胜感激！
杰拉德
tsconfig.json配置

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

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

最佳答案

当编译一系列不使用import或export的文件时，这些文件被视为不是模块，它们声明的所有符号最终都会出现在一个全局空间中。这就是为什么当您删除import语句时，SensedPlaybackProgram.ts能够看到SensedPlayback的原因，即使它是在SensedPlayback.ts中定义的。
在import中添加SensedPlayback.ts语句时，将其转换为typescript模块，然后打开form，如果要使用它定义的符号，则需要从该模块中导出它，并将符号导入到要使用的位置。因此，修改SensedPlayback.ts使其具有：

export class SensedPlayback {
...

在SensedPlaybackProgram.ts中，导入时使用：

import { SensedPlayback } from "./SensedPlayback";

（根据需要调整路径。）

关于typescript - typescript NPM模块导入导致引用失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47161695/