从构造函数调用方法：错误：未捕获类型错误：未定义不是函数

Question

任务：我需要在 Typescript 中构建一个类，在它自己的构造函数中调用它自己的一些方法。

问题：以下示例代码所代表的实际代码将编译成功，但在 Javascript 控制台中测试时，它没有。

示例：

export class volumeEQ
{
    constructor(ctx:any) 
    {
        this.ctx = ctx;         // Audio context saved into member variable of class
        this.setupAudioNodes(); // Sets up nodes made out of audio
    }

    setupAudioNodes()
    {
        this.sourceNode.connect(this.ctx.destination); // Connect to destination
    }
}

技术：Typescript 编译器没有this.setupAudioNodes() 的问题，但是一旦在浏览器的 Javascript 控制台中调用为 Javascript，我就会收到错误 Uncaught TypeError: undefined is not a function。实际上，这是 Javascript 的 this. 语法的问题，并且很容易与它混淆。但是因为我是用 Typescript 开发的，所以我想要一个更加 Typescript 风格的解决方案。

问题：如何在 Typescript 的构造函数中调用类的方法？

Answer 1

下面是如何从构造函数调用方法：

class Thing {
    constructor(name: string) {
        this.greet(name);
    }

    greet(whatToGreet: string) {
        console.log('Hello, ' + whatToGreet + '!')
    }
}

var x = new Thing('world'); // Prints "Hello, world!"

Answer 2

以下是我正在寻找的内容。

解决方案来源：
How can I preserve lexical scope in TypeScript with a callback function

如何在 Typescript 中保留 this. 的词法范围：

如果以下方法声明不起作用：

export class myClass
{
    constructor()
    {
        var myString:string = this.myMethod(true);
    }
    
    public myMethod(useBigString:boolean) : string
    {
        if(useBigString)
        {
            return "bigString";
        }
        return "smlStr";
    }
}

在 javascript 中生成一个方法，如下所示：

myClass.prototype.myMethod = function (useBigString) {

相反，请尝试以这种方式声明您的方法：

export class myClass
{
    constructor()
    {
        var initString:string = this.myMethod(true);
    }
    
    public myMethod = (useBigString:boolean) : string => {
        if(useBigString)
        {
            return "bigString";
        }
        return "smlStr";
    }
}

在构造函数中用javascript声明方法：

this.myMethod = function(useBigString) {

一个缺点是方法语法突出显示不会识别这种定义，但它绝对可以编译和工作！这种情况不适用于类变量，就像类方法一样。

Answer 3

研究：

• TypeScript class function not available
• Typescript: private member is suddenly undefined
• How can I preserve lexical scope in TypeScript with a callback function

临时破解：

• 创建一个具有您希望调用的方法的类，但尽可能使构造函数保持基本。
  
• 下一步创建第二个类，扩展第一个类。
  
• 从超类中调用方法。 示例： super.myFunction();

示例：

export class basicEQ
{
    constructor(ctx:any)
    {
        this.ctx = ctx;         // Audio context saved into member variable of class
    }
    setupAudioNodes()
    {
        this.sourceNode = this.context.createBufferSource(); // Create Buffer Source Node
        this.sourceNode.connect(this.ctx.destination); // Connect to destination
    }
}

export class volumeEQ extends basicEQ
{
    constructor(ctx:any)
    {
        super(ctx);
        super.setupAudioNodes(); // Use super, Not this
    }

}

破解说明：
使用super. 而不是this. 用于构造函数内的方法调用。通过扩展你的类来做到这一点，这样你就可以首先调用 super 。 示例： export class myUsableClass extends myBaseClass。现在，myBaseClass 拥有所有方法，myUsableClass 可以从构造函数中调用它们。

我的解决方案是解决实际问题的方法，但很高兴知道有办法解决这个问题。如果其他人有其他方法可以解决问题，请发帖！ :)