Typescript TypeError: 未定義または null 参照のプロパティ 'split' を取得できません

次の方法を使って文字列から単語を抽出しようとしています：

export class AddContactCtrl implements IAddContactCtrl {

    middleNamesString: string;

    saveContact() {
        var middleNames : string[] = this.middleNamesString.split(" ");
    }
}

しかし、次のエラーが発生します:

TypeError: 定義されていないか null の参照のプロパティ 'split' を取得できません

なぜこのようなことが起きるのでしょうか？this.middleNamesString は string 型であり、split() メソッドを持っているはずなのに、null/undefined を返します。私は this の使い方に関係があるのではないかと疑っていますが、なぜそうなるのかはわかりません。

私は middleNames の文字列配列型を削除しようとしましたが、効果はありませんでした。次のようにローカル変数に変更すると動作します:

var randomString = "Random Name";
var middleNames : string[] = randomString.split(" ");

でも、なぜ？

回答 #1

生成されたJSを見ましたか？ 可能性は二つあります。

まず第一に、middleNamesString に値を割り当てていません。TypeScript クラスから生成される JS では、メンバーは値で初期化されるまでは存在しません（undefined や null のようなプレースホルダーであっても同様です）。もし middleNamesString に値を割り当てていなければ、それは undefined であり、undefined に対して .split() を呼び出すことはできません。

もう一つの可能性は、あなたがメソッドを呼び出す方法では、this がグローバルスコープ（ブラウザでコードが実行されている場合は window オブジェクトなど）を指しているということです。この場合、アロー関数を使用すると、TypeScript（および ES6）で this の呼び出しを現在のクラスインスタンスを指すように書き換えることができます。

saveContact = () => {
    var middleNames : string[] = this.middleNamesString.split(" ");
}

これは、middleNamesString が saveContact が呼び出される前に値が割り当てられていると仮定しています。