Y sí, la característica principal de Typescript son los Tipos, entonces… lo primero que voy a explicar en detalle son los Tipos en Typescript :P. A diferencia de Javascript, que es Dynamic Type, Typescript es exactamente lo opuesto, es Static Type, o sea que, el Tipo de las variables que escribas se va a chequear en tiempo de compilación (antes de que se ejecute tu código). Y si bien esto es una restricción que no se tenía en Javascript, que puede llegar a hacer que escriban un poquito mas de código, y que tengas que hacer unos chequeos extra, a la larga puede hacer que introduzcas menos errores a tu código y te ahorres mucho tiempo y dolores de cabeza.
Declarando Variables en Typescript
“Tipo de Dato o solo Tipo: es una propiedad de las variables que indica qué valores se pueden guardar en ellas y qué operaciones se pueden ejecutar. Por ejemplo, un Tipo de dato puede ser un «number», lo que indica que en la variable de tipo number sólo se pueden almacenar números, y sólo se le pueden aplicar operaciones matemáticas
Entonces, ¿cómo le decimos a Typescript que queremos una variable de tipo «string«?
var miVariable1:string; //variable de tipo string
A diferencia de Javascript, Typescript no permite cambiar el Tipo de una variable. No podemos hacer algo como esto:
miVariable2:string = 'mi variable'; miVariable2 = 1; //error
Ya que la variable «miVariable2» fue declarada como string y el código nos explota por el aire al intentar asignarle algo que no sea un string, en este caso, un número.
Y por cierto, no es necesario declarar el Tipo de una variable, si al declararla se le asigna un valor. O sea, si queremos crear una variable cuyo valor sea «hola» lo hacemos así:
var miVarible3 = 'Hola';
E implícitamente Typescript le asigna el Tipo «string» a la variable «miVariable3».
Y ahora, Objetos
Y claro, no podían faltar los objetos que, por cierto, también son Tipos en Typescript. Si queremos declarar una variable que sea un objeto y tenga la propiedad «nombre»:
var miVariable4 = {nombre: 'Gustavo'}
Es importante aclarar que miVariable4 no es del Tipo object, sino del Tipo {nombre: string }. O sea, un objeto cuya única propiedad es nombre y es del Tipo string.
Esto mismo podemos hacerlo explícitamente declarando el Tipo de la variable a {nombre: string }
var miVariable5: {nombre: string };
miVariable5 = {nombre: 'Hernan'}
Y acá viene la magia de Typescript, si queremos usar una propiedad que no existe, en la declaración nos arroja un error de compilación
var miVariable6: {nombre: string };
miVariable6 = {apellido: 'Dohara'}; //Error de compilacion
//Property 'apellido' does nos exists on type {'nombre': string}
Y lo que nos dice el error es lo que ya sabemos, estamos intentando usar una propiedad que no existe en el tipo que definimos la variable.
Si no te gusta la forma en que está el código anterior, y querés separar el Tipo, lo podés hacer así:
//definís el tipo Persona
type Persona = {nombre: string};
//declarás una variable usando el tipo persona
var miVariable7: Persona;
// ... el resto como antes
¿Y si queremos que una variable se comporte como lo hace en Javascript?, ¿si queremos permitir que, de forma dinámica, se vayan creando propiedades dentro de un objeto?, ¿ésto se puede hacer? digo, al final de cuentas Typescript se termina convirtiendo en código Javascript ¿no?
Es cierto, se puede hacer declarando la variable de forma explícita al Tipo any
var miVariable8: any = {nombre: 'Gustavo'};
para luego hacer
miVariable8.direccion = 'mi casa';
pero claro, haciendo esto perderíamos la facilidad de detectar errores y todo el mecanismo de Tipado de Typescript.
Permitiendo más de un Tipo
Pero bueno, los programadores somos cabeza dura y nos gusta romper las reglas ;). Y si estás pensando si se puede definir una variable de dos Tipos diferentes que «nada que ver» ¡te voy a enseñar un truco!.
Si querés que una variable permita que sea tanto del Tipo «string» como del Tipo «number», lo podés hacer usando el operador unión (|):
miVariable5: string|number; miVariable5 = 'mi variable'; //OK! miVariable5 = 1; //OK También!
“Operador unión de Tipos ( | ): es un operador de Typescript que permite declarar una variable para que acepte dos Tipos diferentes
¿Querés seguir rompiendo reglas? ¡yo también!
¿Qué pasa si quiero tener un objeto con la propiedad nombre y dirección, pero sólo la propiedad nombre es obligatoria y dirección es opcional?
O sea, si definimos un Tipo Persona con las propiedades nombre y dirección:
type Persona = {nombre: string,direccion: string}
var yo:Persona = {nombre: 'Gustavo'}
Esto nos arroja un error, ya que Typescript nos dice que la variable «yo» no es asignable al Tipo Persona, le falta la propiedad direccion. Pero nosotros queremos que la propiedad direccion sea opcional, así que podemos declararla opcional usando el operador «?» de la siguiente forma:
type Persona = {name: string, direccion?: string}
var yo:Persona = {name: 'Gustavo'}
agregándole el signo de pregunta (?) después del nombre de la propiedad, le decimos a Typescript que nuestra propiedad «direccion» es opcional.
Conclusión
El uso mas estricto de los Tipos es una herramienta muy potente si se usa correctamente. Si bien se pierde «libertad» a la hora de tirar líneas de código, se ahorra mucho tiempo a la hora de detectar errores raros (y no tan raros). Además, el definir Tipos te obliga a pensar para qué vas a usar una variable, y te hace mas prolijo a la hora de programar.
Suscribíte a la Newsletter!
Si te suscribís, nunca te vas a perder un post Y vas a tener acceso a mi contenido exclusivo de forma totalmente gratuita. ¡Suscribite!
gustavodohara.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Gustavo Dohara como responsable de esta web.
Finalidad de la recolección y tratamiento de los datos personales: gestionar el alta a esta suscripción y remitir boletines periódicos con información y oferta prospectiva de productos o servicios propios y de terceros afiliados.
Legitimación: Consentimiento del interesado. Destinatarios: Mailchimp. Puedes consultar aquí su política de privacidad. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en gustavo@gustavodohara.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad