Javascript es un lenguaje que tiene un tipado débil, esto quiere decir que las variables son declaradas sin un tipo y dependiendo del valor que se le asigne es el tipo de dato que asume la variable. Podemos modificar, operar y comparar los los valores entre ellos sin que tengamos que hacer una conversión previa.
En el siguiente ejemplo podemos ver como cambiamos el tipo de datos sin ningún tipo de conversión:
1 2let name = "Aprendiendo Javascript" 3console.log(typeof name) 4// "string" 5 6name = 33 7console.log(typeof name) 8// "number"
Typescript es un lenguaje de programación que agrega nuevas funcionalidades a Javascript, esto es conocido como un superset. Un superset se escribe tomando como base otro lenguaje de programación aplicando mejoras en el lenguaje original. Por esta razón Typescript se escribió sobre javascript: para agregar nuevas funcionalidades que verás más adelante.
Typescript es la solución a muchos de los problemas de JavaScript: está pensado para el desarrollo de aplicaciones robustas, implementando características en un lenguaje que nos permitan desarrollar herramientas más avanzadas para el desarrollo de aplicaciones.
El tipado estático define que :
Las variables tienen un solo tipo de datos
Los valores asignados a las variables deben tener el mismo tipo que la variable.
En el siguiente ejemplo se está declarando la variable message del tipo string. Los valores deben tener el mismo tipo de dato que la variable, por esta razón se asigna el string Conociendo TypeScript
1const message: string; 2message: 'Conociendo TypeScript';
En este otro ejemplo, estamos creando un nuevo tipo myAge (el cual, a su vez, usa el tipo number). Luego podamos usar este nuevo tipo directamente en la variable age
1type myAge = number 2const age: myAge; 3message: 'Conociendo TypeScript';
En este otro ejemplo, estamos creando una funcion que recibe dos parametros, par1 del tipo numero y par2 del tipo string, y que devuelve a su vez un string
1function testMyFunction(par1:number, par2:string):string { 2 const parsedVal = number * 2 3 return `${par2} is: ${parsedVal}` 4} 5const myTest = testMyFunction() 6// myTest es un string
Las variables pueden tener diferentes tipos de valores, a continuación detallaremos como podemos definir cada tipo usando TypeScript:
1const isExist:boolean = true
1const message:string = "Conociendo TypeScript"
1const age:number = 33
Typescript tambien cuenta con un tipo "Number", pero este hace referencia a una instancia de la clase Number, no a un entero
1const arrayNumber:Array<number> = [1, 2, 3, 4] 2const arrayStringFirst:Array<string> = ["uno", "dos", "tres", "cuatro"] 3const arrayStringSecond:string[] = ["uno", "dos", "tres", "cuatro"]
1let arraytupla:[number, string, number] 2arraytupla = [23, 'Hello World', true]
1const isNotExist:null = null
1const isNotDeclared:undefined
1function printMyInput(test:string): void { 2 console.log('test', test) 3}
1 2enum Animals { 3 CAT = 'Silvestre', 4 LION = 'Gado', 5 DOG = 'Pluto', 6 COW = 'Vaquita', 7 MONKEY = 'Luffy' 8} 9let c: Animals = Animals.CAT; // El valor de c es Silvestre
1// Ejem: Una funcion que recibe un parametro de algun servicio externo, cuyo tipo desconoce 2const testPrintResponse = (response: unknown) => { 3 if (typeof response === "string") { 4 console.log(response.toUpperCase()); // Safe to use string methods 5 } else if (typeof response === "number") { 6 console.log(response * 2); // Safe to perform numeric operations 7 } else { 8 console.log("Tipo no conocido", response); 9 } 10}
1let wherever: any = 14; 2wherever = "people";
1type myObjType = { 2 myName: string 3 myAge: number 4} 5const myObjTest:myObjType = { 6 myName: 'jose', 7 myAge: 123 8}
Así como en cualquier otro lenguaje de programación orientado a objetos, en TypeScript las clases tienen campos, constructores, propiedades y funciones. Las clases actúan como contenedores que encapsulan código para ser consumidos de una manera más fácil.
Al definir una clase utilizamos la palabra class y cerramos con llaves {}, así como en c# y java por ejemplo y luego definimos adentro nuestros campos, constructores, propiedades y funciones.
En el ejemplo anterior se define un método constructor() que recibe los parámetros name: String, lastName: String, estos parámetros son asignados a los valores internos de la clase utilizando el método this para referenciarlos.
Además las Properties nos permiten obtener y asignar datos de variables o métodos internas de la clase. En el ejemplo el método setName() permite asignar el valor recibido como parámetro a la propiedad interna llamada name. El método getName() permite obtener el valor de la propiedad interna 'name'
Las Functions nos permiten ejecutar funciones o métodos internos de las clase, en el ejemplo el metódo fullName() devuelve la unión de las propiedades internas name más lastName.
Para crear una instancia de la clase User definimos la siguiente constante const newUser = new User('Juanin','JanJarri'); En estas lineas de código se puede apreciar que al crear esta instancia se envían los parámetros 'Juanin','JanJarri' al constructor para inicializar la clase con esos valores.
Para casos en los que se necesita describir objetos mas complejos, como modelos, entidades, DTOs, props simples, entre otros, se puede utilizar interface, cuya forma de uso es muy similar a como se define una clase, pero solo se declaran atributos y métodos, además de su implementación.
Al igual que los tipos de variables simples, estos objetos también deberán seguir un conjunto de reglas creadas por ti. Esto puede ayudarte a escribir código con más confianza y con menos posibilidades de error.
En el siguiente ejemplo definimos una interface llamada Lakes:
1interface Lakes { 2 name: string, 3 area: number, 4 length: number, 5 depth: number, 6 isFreshwater: boolean, 7 countries: string[] 8}
La interface Lakes contiene el tipo de cada propiedad que vamos a utilizar al crear nuestros objetos. A continuación crearemos un nuevo objeto firstLake que heredará las propiedades que tiene la interface Lakes.
1let firstLake: Lakes = { 2 name: 'Caspian Sea', 3 length: 1199, 4 depth: 1025, 5 area: 371000, 6 isFreshwater: false, 7 countries: ['Kazakhstan', 'Russia', 'Turkmenistan', 'Azerbaijan', 'Iran'] 8}
Como puedes ver, no importa el orden en el que asignes un valor a estas propiedades. Sin embargo, no puedes omitir un valor. Deberás asignar un valor a cada propiedad para evitar errores al compilar el código.
De esta manera, TypeScript se asegura de que no se pierda ninguno de los valores requeridos por error.
Para los casos en los que deseas re-utilizar una interface existente, pero agregando nuevas propiedades, se puede optar por 2 caminos:
1interface Ubicacion { 2 direccion?: string 3 ciudad: string 4 distrito: string 5 provincia: string 6 codigoPostal: string 7} 8 9interface UbicacionConCoord extends Ubicacion { 10 lat: string 11 long: string 12}
1interface Gato { 2 comeRatones: boolean 3 saltaEnCasa: boolean 4} 5 6interface Ave { 7 esCantor: boolean 8 aleteaMucho: boolean 9} 10 11type GatoVolador = Gato & Ave 12
A veces, es posible que necesites una propiedad solo para algunos objetos específicos.
Por ejemplo, supongamos que deseas agregar una propiedad para especificar los meses en los que se congela un lago. Si agregas la propiedad directamente a la interfaz, como hemos hecho hasta ahora, obtendrás un error para otros lagos que no se congelan y por lo tanto no tienen la propiedad frozen. De manera similar, si agregas esa propiedad a los lagos que están congelados pero no en la declaración de la interfaz, aún obtendrás un error.
En tales casos, puedes agregar un signo de interrogación ? después del nombre de una propiedad para establecerla como opcional en la declaración de la interfaz (o tipo). De esta manera, no obtendrás un error por propiedades faltantes o propiedades desconocidas. En el siguiente ejemplo se vuelve a definir la interface Lakes pero la propiedad area queda como opcional.
1interface Lakes { 2 name: string, 3 area?: number, // Esto es equivalente a "area: number | undefined" 4 length: number, 5 depth: number, 6 isFreshwater: boolean, 7 countries: string[] 8} 9 10type Animal = { 11 name: string, 12 hasClaws?: bool, 13}
Esta lectura presentó todos los tipos de datos que están disponibles en TypeScript. Aprendimos cómo la asignación de un tipo diferente de valor a una variable mostrará errores en TypeScript. Esta comprobación te ayudará a evitar muchos errores al trabajar en aplicaciones grande y robustas.