TypeScriptのclassで宣言したプロパティ(配列)をメンバ関数から参照できない

Question

前提・実現したいこと

TypeScriptでclassで宣言した配列にメンバ関数で要素を追加しようとしているのですが，配列が未定義と言われます．

発生している問題・エラーメッセージ

TypeError: Cannot read property 'pictureURLs' of undefined

該当のソースコード

class picGet{
    private pictureURLs: Array<string> = [];

    private getPictureURLs(tweetID: string) {
        var apiURL = 'statuses/show/' + tweetID
        this.twitterClient.get(apiURL, this.tweetGetParams).then(function (res) {
            for (const url of res.extended_entities.media) {
                this.pictureURLs.push(url);
            }
        }).catch(function (err) {
            console.log(err);
        });
    }
}

Answer 1

functionで書いたコールバック関数は、関数内でのthisが外側のthisと無関係になってしまいます。

外側のthisをそのまま使いたい場合、アロー関数で書きましょう。

Answer 2

TypeScriptでclassで宣言した配列にメンバ関数で要素を追加しようとしているのですが，配列が未定義と言われます

コード全文がないため詳細は不明ですが、thisがthis.twitterClient.getのthenに渡している無名関数を指してしまうためではないでしょうか？

Answer 3

アロー関数を使ってください。
そうすれば、thisにクラス・インスタンス自身が参照されます。

class picGet{
    private pictureURLs: Array<string> = [];

    private getPictureURLs(tweetID: string) {
        var apiURL = 'statuses/show/' + tweetID
        // functionではなく、アロー関数を使う
        this.twitterClient.get(apiURL, this.tweetGetParams).then( res => {
            for (const url of res.extended_entities.media) {
                this.pictureURLs.push(url);
            }
        }).catch( err => {
            console.log(err);
        });
    }
}

JavaScriptのスーパーセットであるTypeScriptは、
thisの闇仕様を受け継いでいますので、
今回のように、thisの扱いが非常によくわからなくなりがちです。
よって、TypeScriptでは特に、
functionキーワードは使うべきではありません。
（今回のように、thisがかなりややこしいことになるから）