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

Call Method from Constructor: Error: Uncaught TypeError: undefined is not a function

提问by JThora

Task:I need to build a class in Typescript that calls some of it's own methods in it's own Constructor.

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

Problem:The Actual Code that the following Sample Code represents will Compile Successfully, but upon testing in the Javascript Console, it does not.

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

Sample:

样本：

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
    }
}

Technical:The Typescript Compiler does not have a problem with this.setupAudioNodes()but once called as Javascript within the Browser's Javascript Console I receive an error Uncaught TypeError: undefined is not a function. Effectively, this is an issue with Javascript's this.syntax and how it's easy to get confused with it. But because I'm developing in Typescript, I want a more Typescript style solution.

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

Question:How can I call a Class's Methods from it's Constructor in Typescript?

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

回答by Ryan Cavanaugh

Here's how to call a method from the constructor:

以下是从构造函数调用方法的方法：

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

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

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

回答by JThora

The following is what I was looking for.

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

Solution Source:
How can I preserve lexical scope in TypeScript with a callback function

解决方案来源：
如何使用回调函数在 TypeScript 中保留词法范围

How to preserve Lexical Scope of this.in Typescript:

如何this.在打字稿中保留词法范围：

if the following declaration for methods isn't working:

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

export class myClass
{
    constructor()
    {
        var myString:string = this.myMethod(true);
    }

    public myMethod(useBigString:boolean) : string
    {
        if(useBigString)
        {
            return "bigString";
        }
        return "smlStr";
    }
}

which produces a method in javascript like the following:

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

myClass.prototype.myMethod = function (useBigString) {

Instead, Try declaring your methods this way:

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

export class myClass
{
    constructor()
    {
        var initString:string = this.myMethod(true);
    }

    public myMethod = (useBigString:boolean) : string => {
        if(useBigString)
        {
            return "bigString";
        }
        return "smlStr";
    }
}

which declares the method in javascript from within the constructor:

它从构造函数中声明了 javascript 中的方法：

this.myMethod = function(useBigString) {

A drawback is that Method Syntax highlighting will not recognize this sort of definition, but it definitely Compiles and Works! This situation doesn't apply for Class Variables like it does for Class Methods.

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

回答by JThora

Research:

研究：

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

• TypeScript 类函数不可用
• 打字稿：私人成员突然未定义
• 如何使用回调函数在 TypeScript 中保留词法范围

A Temporary Hack:

临时黑客：

• Create one class that has the methods you wish to call, but leave the constructor as basic as possible.
  
• Next Create a second class that extends the first one.
  
• Call the methods from within the Super Class. Example:super.myFunction();

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

Sample:

样本：

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
    }

}

Hack Explaination:
Use super.instead of this.for Method Calls inside the Constructor. Do it by Extending your Class so you may call super in the first place. Example:export class myUsableClass extends myBaseClass. Now, myBaseClasshas all the Methods, and myUsableClasscan call them from the Constructor.

黑客解释：在构造函数中
使用super.代替this.方法调用。通过扩展你的类来做到这一点，这样你就可以首先调用 super 。例子：export class myUsableClass extends myBaseClass。现在，myBaseClass拥有所有方法，并且myUsableClass可以从构造函数调用它们。

My solution is a workaround to the actual problem, but it's good to know there is a way around the issue at all. If anyone else has another means to overcome the problem, do post! :)

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