Typescript : Lost scope of 'this' - node.js

Question

I'm trying to assign a value to myImage. When I look at the js target file myImage doesn't even exist. Obviously this throws an error. How do I preserve the scope of this within typescript classes?
What I'm trying to do here is load an image using the Jimp library. Then have a reference to that loaded image to perform operations on, for example resize is a method of a loaded image inside Jimp, so I'd like to be able to call i.myImage.resize(100,100).
"use strict";
var Promise = require('bluebird');
var Jimp = require("jimp/jimp");
class Image{
public myImage:any;
constructor(newImage:string){
Promise.all([new Jimp(newImage)]).then(function(img){
this.myImage = img;
}).catch(function(e){
console.log(e);
})
}
}
var i = new Image('./jd.jpg');
console.log(i.myImage)
The output:
undefined
[TypeError: Cannot set property 'myImage' of undefined]
With Callbacks :
var Jimp = require("jimp/jimp");
class Image {
public myImage: any;
constructor(newImage: string, typeOfImage: string) {
var self = this;
new Jimp(newImage, function(e,img) {
self.myImage = img;
});
}
}
var i = new Image('./jd.jpg');
console.log(i.myImage) // outputs undefined

Answer 1

The Jimp constructor does not return a promise so your use of Promise.all() here is likely not doing what you want it to do. As some people get confused by this, promises do not have any magic powers to somehow know when the Jimp object has finished loading it's image so if that's what you're trying to do here, it will not work that way. The Jimp constructor returns a Jimp object, not a promise.
I don't see any particular reason to not just use the Jimp callback that you pass into the constructor and make your code work like this:
var Jimp = require("jimp/jimp");
class Image {
private myImage: any;
constructor(newImage: string, typeOfImage: string) {
var self = this;
new Jimp(newImage, function(img) {
self.myImage = img;
// you can use the img here
});
// you cannot reliably use the img here
}
}
But, doing it this way looks like it still leaves all sorts of loose ends because the outside world has no way of knowing when the img has finished loading and you aren't saving the Jimp object reference itself so you can't use any of the Jimp methods on this image. As I said in my comments, if you share the bigger picture for what you're trying to do here, then we can more likely help you with a more complete solution to your problem.