TypeScript / Asignacion definitiva

Bienvenidos sean a este post, hoy veremos un operador muy particular para los tipos.

Hasta ahora hemos visto varias formas de declarar variables pero originalmente javascript lo hacia mediante var, pero no era obligatorio por lo tanto podemos usar una variable antes de definirla. Para entender el concepto vamos analizar el siguiente codigo:

console.log("valor = " + valor);
var valor = 1;
console.log("valor = " + valor);

Este codigo simple primero mostrara a valor, luego lo asignaremos mediante var y lo volveremos a mostrar, veamos como es su salida:

$ node definir.js
valor = undefined
valor = 1
$

En este caso sucedio lo que comentamos en otros posts anteriores, el valor inicial de una variable cuando no se lo asignamos es undefined, y despues mostro el valor que le asignamos. Como dijimos esta es una conducta que nos permite tener javascript pero que sucede con typescript? Veamos que sucede y para ello primero ejecutaremos este comando:

$ tsc --init

Esto nos creara el archivo tsconfig.json, con esto realizado volvamos a compilar el codigo para ver su salida:

$ tsc
definir.ts:1:26 - error TS2454: Variable 'valor' is used before being assigned.

1 console.log("valor = " + valor);
                           ~~~~~


Found 1 error in definir.ts:1

$

Esto podemos solucionarlo simplemente moviendo la definicion de la variable al inicio y no ocurriria ningun error, tomemos el codigo anterior y vamos a modificarlo de la siguiente manera:

var cadena: string;
setCadena("cadena establecida");
console.log(cadena);
function setCadena(v: string) {
        cadena = v;
}

Aqui declaramos una variable de tipo string, lo siguiente es mediante la funcion setCadena establecer un valor para la variable anterior, luego mostraremos el valor de la variable y finalmente tenemos la definicion de la funcion que usamos anteriormente, donde recibimos un mensaje y luego se lo asignamos, probemos a compilarlo para ver su salida:

$ tsc
definir.ts:3:13 - error TS2454: Variable 'cadena' is used before being assigned.

3 console.log(cadena);
              ~~~~~~


Found 1 error in definir.ts:3

$

Volvimos a tener el mismo error, esto es debido a que si bien llamamos a la funcion para establecerle un valor, esta se encuentra despues del intento de mostrarla, es decir seguimos sin establecerlo pero esto podemos solucionarlo de una manera muy simple. Para ello debemos aplicar al operador de asercion de asignacion definida (!), iremos nuevamente al codigo anterior y primero iremos a la siguiente linea:

var cadena: string;

Y la modificaremos de la siguiente manera:

var cadena!: string;

Ahora iremos a la siguiente linea:

console.log(cadena);

La cual modificaremos de la siguiente manera:

console.log(cadena!);

Este operador basicamente le dice al compilador que debe anular todas las verificaciones de sintaxis para esta variable, ya sea tanto en el momento de declararla como al momento de usarla. Con esto evitaremos de que al momento de compilarlo nos notifica del error anterior y podra ejecutarlo perfectamennte, compilemos y veamos su salida:

$ node definir.js
cadena establecida
$

En resumen, hoy hemos visto al operador de asignacion definitiva, que es, para que sirve, dos ejemplos donde una mala definicion de nuestras variables pueden evitar que compilemos el codigo, para luego mediante este operador ver como podemos omitirlo, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.