Typescript TypeError: No se puede obtener la propiedad 'split' de una referencia indefinida o nula

Estoy intentando extraer palabras de una cadena usando lo siguiente:

export class AddContactCtrl implements IAddContactCtrl {

    middleNamesString: string;

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

Sin embargo, obtengo el siguiente error:

TypeError: No se puede obtener la propiedad 'split' de una referencia indefinida o nula

¿Por qué es este el caso? this.middleNamesString es de tipo string, lo cual debería tener el método split(), ¿y aun así devuelve null/undefined? Sospecho que tiene algo que ver con la forma en que estoy usando this, pero no estoy seguro de por qué.

He intentado eliminar el tipo de arreglo de cadenas middleNames, sin efecto. Funciona si lo cambio a una variable local de esta manera:

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

¿Pero por qué?

Respuesta #1

¿Has mirado el JS emitido? Hay dos posibilidades.

Lo primero es que nunca estás asignando un valor a middleNamesString. Con el JS generado a partir de clases de TypeScript, los miembros no existen hasta que se inicializan con un valor (o un marcador como undefined o null). Si no has asignado un valor a middleNamesString, entonces es undefined, y no puedes llamar a .split() en undefined.

La otra posibilidad es que, con la forma en que estás llamando al método, this esté apuntando al ámbito global (como el objeto window si tu código se está ejecutando en el navegador). En este caso, quieres usar una función flecha, la cual reescribirá las llamadas a this para que apunten a la instancia actual de la clase en TypeScript (y ES6).

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

Esto todavía asume que middleNamesString ha sido asignado un valor antes de que se llame a saveContact.