I'm facing a challenge trying to utilize a method stored on a Typescript class within a Vue component.
When I attempt to use a method defined on that class from another class (which also happens to be a Typescript Vue component), the console throws an Uncaught TypeError indicating that the method I'm trying to access is not a function.
Let's take a look at the following Paper class:
export class Paper {
paperSize: number;
documentTitle: string;
constructor() {
paperSize = 1;
documentTitle = "Arbitrary title";
}
getDocumentRatio(): number {
return ArbitraryLibrary.arbitraryNumericFunction(this.paperSize);
}
}
When I try to use this class (the Vue component) in another class like this:
@Component()
export class PaperUser {
paper = new Paper();
paperUserMethod() {
...
const unimportant = this.paper.getDocumentRatio();
...
}
...
// Wherever the method gets used
this.paperUserMethod();
...
}
The execution of the method is unfortunately interrupted due to the TypeError caused by the way the function is being used.
Initially, I thought this might be a binding issue, so I tried something like:
...
this.paper.getDocumentRatio().bind(this.paper);
...
However, it turns out that this approach doesn't work either, as binding in this manner is as effective as method chaining, with VSCode asserting that the property 'bind' does not exist on type 'number'.