Task: I need to build a class in Typescript that calls some of it's own methods in it's own Constructor.
Problem: The Actual Code that the following Sample Code represents will Compile Successfully, but upon testing in the Javascript Console, it does not.
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.
Question: How can I call a Class's Methods from it's Constructor in Typescript?
The TypeError: "x" is not a function can be fixed using the following suggestions: Paying attention to detail in code and minimizing typos. Importing the correct and relevant script libraries used in code. Making sure the called property of an object is actually a function.
TypeScript does not analyze methods you invoke from the constructor to detect initializations, because a derived class might override those methods and fail to initialize the members.
The JavaScript exception "is not a constructor" occurs when there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor.
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.
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!"
The following is what I was looking for.
Solution Source:
How can I preserve lexical scope in TypeScript with a callback function
this.
in Typescript: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:
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With