找不到函数名

Question

我正在尝试做我的第一个 TypeScript/React 项目，但遇到了问题。

使用这个答案，我设法从我的麦克风读取和播放声音，并在控制台中显示一些样本分析数据。现在我正在尝试将其翻译成 TS。一步一步来，我已经到了这个：

export class Processor {
    readonly BUFFER_SIZE = 16384;

    audioContext: AudioContext;
    gainNode: GainNode;
    microphoneStream: MediaElementAudioSourceNode;

    constructor() {
        this.audioContext = new AudioContext();

        console.log('audio is starting up ...');

        if (navigator.getUserMedia) {
            navigator.getUserMedia(
                { audio: true },
                function (stream) {
                    startMicrophone(stream);
                },
                function (e) {
                    alert('Error capturing audio.');
                });
        } else {
            alert('Seems like this browser might not be supported.');
        }
    }

    private startMicrophone(stream: MediaStream) {
        this.gainNode = this.audioContext.createGain();
        this.gainNode.connect(this.audioContext.destination);

        this.microphoneStream = 
this.audioContext.createMediaStreamSource(stream);
    }
}

除了调用 startMicrophone 给我

'Cannot find name 'startMicrophone'.'

我还尝试用 引用它this，这导致了不同的错误：

''this' implicitly has type 'any' because it does not have a type annotation.'

我不知道我做错了什么，真的可以使用一些指导。

Answer 1

推荐：如果你想使用 this，你必须使用箭头函数，因为如果你把 this 写在函数块中，它引用当前函数 this 而不是父 this。

export class Processor {
    readonly BUFFER_SIZE = 16384;

    audioContext: AudioContext;
    gainNode: GainNode;
    microphoneStream: MediaElementAudioSourceNode;

    constructor() {
        this.audioContext = new AudioContext();

        console.log('audio is starting up ...');

        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                    audio: true
                },
                (stream) => {
                    this.startMicrophone(stream);
                },
                (e) => {
                    alert('Error capturing audio.');
                });
        } else {
            alert('Seems like this browser might not be supported.');
        }
    }

    private startMicrophone(stream: MediaStream) {
        this.gainNode = this.audioContext.createGain();
        this.gainNode.connect(this.audioContext.destination);

        this.microphoneStream =
            this.audioContext.createMediaStreamSource(stream);
    }
}

另一种方法是您可以将其分配给其他变量并const self= this;在函数内使用use self 。

constructor() {
    const self = this;
    this.audioContext = new AudioContext();
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
                audio: true
            },
            function (stream) {
                self.startMicrophone(stream);
            },
            function (e) {
                alert('Error capturing audio.');
            });
    } else {
        alert('Seems like this browser might not be supported.');
    }
}