Articles
Introducción a TypeScript
Conceptos básicos de TypeScript

Conceptos básicos de TypeScript

Este artículo explica los conceptos básicos de TypeScript.

YouTube Video

Ejecutando "¡Hola Mundo!"

Primero, ejecutaremos el ejemplo clásico de "¡Hola Mundo!" en TypeScript utilizando Visual Studio Code.

npm install -g typescript

Instala typescript utilizando el comando npm.

Crea un archivo tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Crea un archivo .vscode/launch.json para permitir ejecutar el archivo main.ts en Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Crea un archivo main.ts que muestre "Hello World!". Puedes ejecutarlo en Visual Studio Code presionando la tecla F5.

1console.log("Hello World!");

Al configurar de esta manera, puedes ejecutar archivos de TypeScript dentro de VSCode.

Visión general de TypeScript

TypeScript (TS) es un superconjunto de JavaScript desarrollado por Microsoft. TypeScript admite la tipificación estática, permitiendo un código más robusto y mantenible.

Tipificación Estática

  • TypeScript agrega tipos a JavaScript y realiza la verificación de tipos durante el tiempo de compilación. Esto permite prevenir errores relacionados con tipos con antelación.
1let message: string = "Hello, TypeScript";
2console.log(message);

Compilación

  • Dado que TypeScript no puede ejecutarse directamente en un navegador, necesita ser transpilado (compilado) a JavaScript. Utiliza tsc (el compilador de TypeScript) para convertir archivos TS en archivos JS.

Anotaciones de Tipo Opcionales

  • TypeScript también realiza inferencia de tipos, pero te permite especificar tipos explícitamente cuando sea necesario. Esto mejora la legibilidad y la fiabilidad del código.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Interfaces

  • TypeScript proporciona interface para definir la estructura de los objetos. Esto permite una gestión estricta de la estructura de los objetos.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Clases

  • TypeScript proporciona extensiones a la sintaxis de clases de JavaScript y soporta herencia, modificadores de acceso (public, private, protected) y clases abstractas.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Genéricos

  • En TypeScript, puedes escribir código reutilizable y seguro utilizando genéricos.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ecosistema

  • TypeScript es totalmente compatible con el ecosistema de JavaScript y puede utilizar el código JavaScript existente tal como está. Además, está integrado con bibliotecas populares como React y Node.js.

Herramientas potentes para desarrolladores

  • TypeScript ofrece características avanzadas como autocompletar, soporte para refactorización y verificación de errores en editores como VSCode.

TypeScript es particularmente útil para mejorar la confiabilidad y la productividad de los desarrolladores en proyectos grandes.

Variables en TypeScript

Esto explica los conceptos básicos y el uso de variables en TypeScript.

Declaración de Variables

En TypeScript, las variables se declaran utilizando tres palabras clave: let, const, y var. Cada palabra clave tiene características diferentes.

Ejemplo de let:

let tiene un alcance de bloque (válido solo dentro de llaves {}). Los valores se pueden reasignar más tarde.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Ejemplo de const:

const no puede reasignarse, por lo que el valor asignado una vez no puede cambiarse. Sin embargo, se pueden modificar los contenidos de objetos y arreglos.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Ejemplo de var:

var tiene un alcance de función y se puede reasignar. Sin embargo, al ignorar el alcance de bloque, puede causar un comportamiento inesperado en comparación con let o const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Anotaciones de Tipo

En TypeScript, puedes anotar explícitamente los tipos para las variables. La inferencia de tipos también es compatible, pero las anotaciones de tipos son útiles en escenarios complejos.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Variables no inicializadas

Si se declara una variable sin inicializar, se le asigna undefined por defecto. Una variable declarada con let debe ser asignada explícitamente como undefined o incluir undefined en su tipo si no está inicializada.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Ámbito de las Variables

let y const tienen un ámbito de bloque, por lo que solo son válidos dentro del mismo bloque.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Elevación de Variables

Dado que TypeScript es un superconjunto de JavaScript, hereda la característica de elevación de JavaScript. La elevación se refiere al comportamiento en el que las declaraciones de variables y funciones se tratan como si se elevaran al inicio de su alcance. Sin embargo, solo la declaración se eleva, mientras que la inicialización permanece en su lugar. Las variables declaradas con var se elevan, pero usar let o const antes de su declaración genera un error.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • En este caso, las variables declaradas con var se elevan y sus valores se muestran.
1console.log(b); // ReferenceError
2let b = 20;
  • Las variables declaradas con let no se elevan, lo que resulta en un error.

Resumen

A continuación se presenta un resumen de let, const y var.

  • let puede ser reasignado y tiene un alcance de bloque.
  • const no puede ser reasignado y tiene un alcance de bloque.
  • var puede ser reasignado y tiene un alcance de función.
  • Todos ellos permiten una anotación de tipo explícita para especificar los tipos de variable.

Caracteres de escape en TypeScript

Los caracteres de escape se usan cuando ciertos caracteres no pueden ingresarse directamente o para representar caracteres que tienen un significado especial dentro de una cadena. En TypeScript, los caracteres de escape se utilizan para representar caracteres de control o caracteres especiales.

Por ejemplo, usa \n para mostrar un mensaje que incluya un salto de línea.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Escapando caracteres especiales

Los caracteres de escape también son útiles cuando se incluyen caracteres especiales en una cadena. Por ejemplo, puedes querer usar comillas dobles o simples directamente dentro de una cadena.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Escapar la barra invertida en sí misma

Para incluir una barra invertida en una cadena, necesitas escribirla como una doble barra invertida.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Escapes en Unicode y hexadecimal

En TypeScript, los puntos de código Unicode pueden representarse usando secuencias de escape.

Secuencia de escape Unicode

Puedes representar caracteres Unicode especificando un número hexadecimal de cuatro dígitos después de \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Escape hexadecimal

Puedes representar caracteres específicos usando un número hexadecimal de dos dígitos después de \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Literales de plantilla y escapes

Los literales de plantilla se definen encerrándolos entre acentos graves y proporcionan una manera fácil de crear expresiones incrustadas o cadenas de varias líneas. Los caracteres de escape regulares se pueden usar directamente en literales de plantilla.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Casos especiales

En TypeScript, el uso de secuencias de escape inválidas dentro de una cadena puede resultar en un error de sintaxis. Por lo tanto, es importante verificar si los caracteres de escape son válidos.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Ejemplos de uso práctico

Aquí tienes un ejemplo de cómo construir una cadena compleja usando caracteres de escape.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

En este ejemplo, se usa \n para un salto de línea y \t para agregar una sangría. Esto hace que la estructura JSON sea más fácil de leer.

Resumen

Los caracteres de escape son muy importantes al trabajar con cadenas en TypeScript. Cuando deseas incluir caracteres especiales o de control en una cadena, puedes crear cadenas expresivas utilizando secuencias de escape apropiadas. Entender y usar los caracteres de escape correctamente puede mejorar la legibilidad y mantenibilidad del código.

Versiones de TypeScript

Echemos un vistazo general a las versiones de TypeScript aquí.

  1. TypeScript 1.0 (2014)

    La primera versión estable de TypeScript. Se introdujeron características básicas como tipado, clases y módulos.

  2. TypeScript 2.0 (2016)

    Se introdujeron Tipos no anulables, Análisis de Flujo de Control, Propiedades Solo Lectura y el tipo Never, mejorando la inferencia de tipos.

  3. TypeScript 3.0 (2018)

    Se introdujo un sistema de tipos más flexible, con características como Referencias de Proyectos, extensiones de Tipos de Tuplas y mejoras en Parámetros Rest.

  4. TypeScript 4.0 (2020)

    Se añadieron características como Tipos de Tuplas Variádicos, mejoras en el editor, inferencia de tipos mejorada y Elementos de Tuplas Etiquetados para mejorar la experiencia de desarrollo.

  5. TypeScript 4.1 (2020)

    Se introdujeron los Tipos de Literales de Plantilla, haciendo más potente la manipulación de tipos de cadena.

  6. TypeScript 4.3 (2021)

    La adición de la palabra clave Override, mejoras a los modificadores de acceso dentro de los constructores y un soporte de tipos mejorado para WeakMap y WeakSet.

  7. TypeScript 4.5 (2021)

    Se añadieron el tipo Awaited, ModuleSuffixes y una compatibilidad mejorada con los módulos de ECMAScript.

  8. TypeScript 5.0 (2023)

    Se han realizado la estandarización de los Decorators, mejoras en la velocidad de construcción del proyecto, mejoras en el sistema de tipos y compatibilidad con las últimas características de ECMAScript.

TypeScript está evolucionando constantemente, con múltiples versiones lanzadas cada año que introducen nuevas características y mejoras.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Tipos de Datos en TypeScript