Introducción a Typescript: ¿Huir o Abrazarlo con Pasión?"

¿Qué es TypeScript y por qué utilizarlo?

TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft que extiende JavaScript al agregar tipos estáticos. Facilita la detección de errores en tiempo de desarrollo y mejora la legibilidad y autocompletado del código.

Ventajas de TypeScript sobre JavaScript

• Tipos estáticos: Ayudan a prevenir errores en tiempo de ejecución
• Herramientas de desarrollo mejoradas: Autocompletado, refactorización y navegación más sólidos
• Características modernas de JavaScript: Incluye características de ECMAScript recientes y propuestas
• Orientación a objetos más sólida: Clases, interfaces, herencia y otros conceptos de OOP

Tipos primitivos (string, number, boolean, null, undefined, symbol)

Los tipos primitivos, también conocidos como tipos básicos o tipos fundamentales, son los bloques de construcción básicos de un lenguaje de programación. Estos tipos representan valores simples que no están compuestos por otros valores o estructuras de datos más complejas. Los tipos primitivos suelen incluir:

1. Number: representa números, tanto enteros como decimales (por ejemplo, 42, -3, 3.14). En JavaScript y TypeScript, todos los números se representan como números de coma flotante de doble precisión según el estándar IEEE 754.
2. String: representa secuencias de caracteres, es decir, texto (por ejemplo, "hola", "abc123"). Los strings pueden ser delimitados por comillas simples (''), comillas dobles ("") o acentos graves (``) en JavaScript y TypeScript.
3. Boolean: representa valores verdaderos o falsos (por ejemplo, true, false). Este tipo se utiliza comúnmente para representar condiciones, resultados de comparaciones o estados binarios.
4. Null: representa un valor nulo, es decir, una referencia que no apunta a ningún objeto o valor. En JavaScript y TypeScript, null es un tipo primitivo y un valor especial que indica que una variable no tiene ningún valor o referencia.
5. Undefined: representa un valor que no ha sido asignado o definido. En JavaScript y TypeScript, undefined es un tipo primitivo y un valor especial que indica que una variable ha sido declarada pero no se le ha asignado un valor.

En TypeScript, además de los tipos primitivos mencionados, existen dos tipos básicos adicionales:

1. Symbol: representa valores únicos e inmutables que pueden ser utilizados como identificadores para propiedades de objetos.
2. BigInt: representa números enteros de precisión arbitraria. Este tipo permite trabajar con números enteros más grandes que el límite superior de los números de tipo number.

`typescript
var s = "JavaScript syntax highlighting";
alert(s);
`

Ejemplos prácticos de uso de tipos primitivos

`typescript
var s = "JavaScript syntax highlighting";
alert(s);
`

`javascript
let nombre: string = "Juan";\
let edad: number = 30;\
let casado: boolean = false;\
let indefinido: undefined;\
let nulo: null = null;

function saludo(nombre: string): string {\
return Hola, ${nombre}!;\
}

console.log(saludo(nombre)); // Hola, Juan
`

ver online este ejemplo

Ejemplo con Symbol

`typescript
const simboloNombre = Symbol("nombre");\
const simboloEdad = Symbol("edad");

const persona = {\

saludar: function () {\
console.log(Hola, mi nombre es ${this[simboloNombre]} y tengo ${this[simboloEdad]} años.);\
},\
};

persona.saludar(); // Hola, mi nombre es Juan y tengo 30 años.

// Las propiedades con símbolos no se muestran en un bucle for...in ni en Object.keys()\
for (const prop in persona) {\
console.log(prop);\
}\
// Output: saludar

console.log(Object.keys(persona)); // Output: [ 'saludar' ]
`

En este ejemplo, las propiedades nombre y edad del objeto persona usan símbolos como claves en lugar de strings. Esto garantiza que estas claves sean únicas y no entren en conflicto con otras propiedades que puedan tener el mismo nombre.

Ejemplo con BigInt

`typescript
const numeroGrande1: bigint = BigInt("123456789012345678901234567890");\
const numeroGrande2: bigint = BigInt("987654321098765432109876543210");

const suma: bigint = numeroGrande1 + numeroGrande2;\
const multiplicacion: bigint = numeroGrande1 * numeroGrande2;

console.log("Suma:", suma.toString()); // Suma: 1111111110111111111011111111100\
console.log("Multiplicación:", multiplicacion.toString());\
// Multiplicación: 12193263113702179522496570642228279470
`

En este ejemplo, creamos dos números BigInt a partir de strings que contienen números enteros muy grandes. Luego realizamos operaciones de suma y multiplicación con estos números BigInt. Con BigInt, podemos trabajar con números enteros más grandes que el límite superior de los números de tipo number sin perder precisión.

Interfaces y tipos personalizados

Una interfaz en TypeScript es una estructura que define la forma de un objeto, es decir, el conjunto de propiedades y métodos que un objeto debe tener.

Las interfaces en TypeScript se crean utilizando la palabra clave interface seguida del nombre de la interfaz. Las interfaces pueden contener declaraciones de propiedades, métodos y también pueden ser extendidas o implementadas por otras interfaces y clases.

`typescript
interface Persona {\
nombre: string;\
edad: number;\
casado?: boolean;\
saludar: () => string;\
}

const juan: Persona = {\
nombre: "Juan",\
edad: 30,\
saludar: function () {\
return Hola, soy ${this.nombre} y tengo ${this.edad} años. ${this.casado ? 'Estoy casado' : 'Estoy Soltero'};\
},\
};

console.log(juan.saludar()); // "Hola, soy Juan y tengo 30 años. Estoy Soltero"

Los tipos personalizados se crean utilizando la palabra clave type`, seguida del nombre del tipo y la definición del mismo. Estos tipos te permiten especificar estructuras de datos más complejas y darles un nombre semántico, lo que mejora la legibilidad y la organización del código.

Los tipos personalizados también pueden representar uniones de tipos, alias de tipos primitivos y tipos más complejos, como funciones y tuplas. Por ejemplo:

`typescript
type ID = string | number;\
type Callback = (error: Error | null, data: any) => void;\
type Punto3D = [number, number, number];
`

¿Debería estar usando Typescript ya?

Yo creo que sí, pero la respuesta no se tan sencilla como parece. Te pongo algunos ejemplos donde usar Typescript es una ventaja clara.

Ventajas de usar Typescript

1. Detección de errores: TypeScript verifica los tipos de datos en tiempo de compilación, lo que ayuda a detectar errores antes de que el código se ejecute en tiempo de ejecución. Si copias y pegas código de un sitio a otro y hay problemas de tipo, TypeScript te alertará sobre estos problemas antes de que se conviertan en errores difíciles de encontrar en tiempo de ejecución.
2. Mejora la colaboración entre equipos: TypeScript proporciona una forma explícita de definir las estructuras de datos y las expectativas de tipos en el código. Esto facilita la comprensión y la colaboración en el código escrito por otros equipos, ya que los desarrolladores pueden ver rápidamente cómo deben interactuar con las funciones y objetos proporcionados por otros equipos.
3. Navegación y refactorización en proyectos grandes: TypeScript mejora la navegación y refactorización en proyectos grandes al proporcionar información de tipo detallada y herramientas de análisis estático. Las herramientas de desarrollo integradas en los editores de código (como Visual Studio Code) pueden aprovechar esta información de tipo para proporcionar sugerencias de código, saltos a definiciones, cambios de nombre globales y otras características que facilitan la navegación y la modificación del código en proyectos grandes y complejos.
4. Integración con frameworks y bibliotecas: TypeScript es compatible con muchas bibliotecas y frameworks populares de JavaScript, como React, Angular y Vue. Los archivos de declaración de tipo (archivos .d.ts) proporcionados por estos proyectos permiten a los desarrolladores utilizar TypeScript para aprovechar la verificación de tipos, la autocompletión de código y otras características útiles al trabajar con estas bibliotecas y frameworks.
5. Desarrollo de aplicaciones escalables: TypeScript es especialmente útil en proyectos de software grandes y a largo plazo que requieren escalabilidad y mantenibilidad. El sistema de tipos de TypeScript y las características de lenguaje adicionales (como interfaces, clases y decoradores) permiten a los desarrolladores crear aplicaciones modulares y bien estructuradas que son más fáciles de mantener y ampliar a lo largo del tiempo. Esto es especialmente útil en aplicaciones empresariales y proyectos de código abierto con muchos colaboradores.

Desventajas de implementar Typescript

Aunque TypeScript ofrece muchas ventajas, también hay algunas desventajas o desafíos potenciales al implementarlo en un proyecto. Algunas de estas desventajas incluyen:

1. Curva de aprendizaje: TypeScript agrega un conjunto adicional de características y conceptos a JavaScript, lo que significa que los desarrolladores que no estén familiarizados con TypeScript tendrán que aprender estos conceptos antes de poder trabajar de manera efectiva en un proyecto que lo utilice.
2. Tiempo de compilación: TypeScript requiere un paso de compilación adicional para convertir el código TypeScript en JavaScript antes de que pueda ejecutarse en un navegador o entorno de Node.js. Este paso de compilación puede aumentar el tiempo de desarrollo y construcción, especialmente en proyectos grandes.
3. Integración con bibliotecas y frameworks: Aunque TypeScript es compatible con la mayoría de las bibliotecas y frameworks populares de JavaScript, puede haber casos en los que una biblioteca o un framework no tenga tipos de TypeScript disponibles o estén desactualizados. Esto puede requerir que los desarrolladores creen sus propias definiciones de tipos o trabajen con tipos menos precisos, lo que puede aumentar la complejidad y el tiempo de desarrollo.
4. Verbosidad: El uso de tipos explícitos y anotaciones de tipo en TypeScript puede hacer que el código sea más largo y posiblemente más difícil de leer en comparación con el código JavaScript puro. Los desarrolladores pueden necesitar tiempo para adaptarse a este estilo de codificación y encontrar un equilibrio adecuado entre la precisión de los tipos y la legibilidad del código.
5. Adopción en el equipo: Si trabajas en un equipo con desarrolladores que no están familiarizados con TypeScript, puede haber resistencia a la adopción de TypeScript debido a la curva de aprendizaje y la preocupación por la compatibilidad con las herramientas y bibliotecas existentes.

En general, es importante sopesar las ventajas y desventajas de implementar TypeScript en función de las necesidades específicas de tu proyecto y equipo. Si las ventajas en términos de seguridad de tipos, escalabilidad y mantenibilidad superan los desafíos y las desventajas potenciales, entonces TypeScript puede ser una adición valiosa a tu proyecto.

¿Soy principiante, qué debo aprender antes Typescript o Javascript?

JavaScript es el lenguaje base sobre el que se construye TypeScript, por lo que comprender los fundamentos de JavaScript te permitirá aprender TypeScript de manera más efectiva. Conocer las estructuras de control, funciones, objetos y otros conceptos básicos de JavaScript es esencial para cualquier desarrollador web.

No obstante, puesto que Typescript está basado en Javascript, puedes aprender puedes aprender los principios básicos de Javascript en el entorno de Typescript.

Este código es valido en Javascript y en Typescript por ejemplo

`typescript
let nombre = "Juan";\
let edad = 30;\
let casado = false;\
let indefinido;\
let nulo = null;\
let simbolo = Symbol("descripcion");\
function saludo(nombre) {\
return `Hola, ${nombre}!`;\
}\
console.log(saludo(nombre)); // Hola, Juan
`

Conclusión - Abrazarlo, con pasión moderada!

En general, es importante sopesar las ventajas y desventajas de implementar TypeScript en función de las necesidades específicas de tu proyecto y equipo. Si las ventajas en términos de seguridad de tipos, escalabilidad y mantenibilidad superan los desafíos y las desventajas potenciales, entonces TypeScript puede ser una adición valiosa a tu proyecto.