找不到函数名

Posted 2023-02-25

【中文标题】找不到函数名

【英文标题】：Cannot find function name

【发布时间】：2018-03-09 12:31:55

【问题描述】：

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

使用this answer，我设法从我的麦克风读取和播放声音，并在控制台中显示一些样本分析数据。现在我正在尝试将其翻译成 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.'

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

【参考方案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.');
    

【讨论】：

非常感谢，它不仅有效，而且您还解释了为什么有效。我会避免接受一两个小时，以防有人提供更详细的答案。谢谢！

@Lasooch 没关系，查看我更新的答案，您会对此更清楚。

self= this 是 ES6 中的反模式。因为我们的箭正好可以达到这个目的。

箭头函数是正式名称，还是只是 lambda 函数的俗称？

@Lasooch 这是官方的developer.mozilla.org/en/docs/Web/javascript/Reference/… 。 “胖箭”是俗语。