Sebastian Gomez

Feb 26, 2022

Updated: Jun 24, 2026

Fundamentos de TypeScript

Si has empezado a trabajar con Angular, seguro te habrás dado cuenta de que la mayoría de la documentación está escrita en TypeScript. Esto se debe a que el equipo de Angular decidió construir Angular sobre TypeScript. TypeScript es un superset de JavaScript creado y mantenido por Microsoft, cuyo objetivo principal es añadir tipado estático opcional a JavaScript.

Es decir, con TypeScript puedes anotar tus variables, parámetros y valores de retorno con tipos, de modo que el compilador detecte errores antes de ejecutar el código. JavaScript ya tiene clases, constructores y métodos desde ES2015, así que TypeScript no convierte JavaScript en orientado a objetos, lo que suma son los tipos y herramientas como modificadores de acceso (public, private, protected) que ayudan a escribir código más seguro y mantenible.

¿Qué es TypeScript?

Podemos definir TypeScript como un transpilador de JavaScript. Sí, un transpilador. Básicamente, TypeScript convierte tu código TypeScript en código JavaScript que el navegador o Node.js pueden ejecutar directamente. Sin embargo, eso no es todo.

Como te he contado en tutoriales pasados, JavaScript evoluciona a través de los estándares ECMAScript (ES2015, también llamado ES6, y todas las versiones anuales posteriores). Hoy, en 2026, ES2015 y versiones muy posteriores tienen soporte universal en los navegadores modernos y en Node.js, así que ya no necesitas preocuparte por si tu código moderno funcionará. El antiguo ES5 solo es relevante como objetivo de compatibilidad para entornos heredados.

Aquí es donde brilla TypeScript: puedes escribir código con la sintaxis más moderna y elegir a qué versión de ECMAScript se transpila la salida (por ejemplo ES2022 o ESNext para entornos actuales, o ES5 solo si necesitas soportar navegadores muy antiguos).

Primeros pasos con TypeScript

En este tutorial nos olvidaremos de Angular en sí, y nos dedicaremos solo a TypeScript de manera independiente. Por tanto, nuestro primer paso consistirá en instalar TypeScript. Para ello vamos a ejecutar el siguiente comando (recuerda tener instalado Node.js):

npm install -g typescript

Hecho esto, ya tenemos TypeScript en nuestro sistema. Veamos ahora algunos ejemplos.

Variables y funciones tipadas

Simplemente puedes anotar tus valores con tipos de datos, es decir:

let nombre: string = "Esto es un string";
let edad: number = 43;
let bandera: boolean = true;

// Recibe un string como parámetro y retorna un string como resultado
function hola(nombre: string): string {
  return "hola " + nombre;
}

Arreglos

let empresas: Array<string> = ['IBM', 'Microsoft', 'Google'];
let marcas: string[] = ['Apple', 'Dell', 'HP'];

Any

Puedes usar el tipo any para asignarle cualquier tipo a una variable. Es como un comodín. Eso sí, úsalo con moderación, porque desactiva las comprobaciones de tipos que son justamente la ventaja de TypeScript.

Void

Puedes declarar funciones que no retornan nada usando el tipo void.

function setNombre(nombre: string): void {
  this.nombre = nombre;
}

Clases y objetos

Podemos crear clases con atributos, métodos y constructores.

// Define una clase llamada "Persona"
class Persona {
  // Declara una propiedad "nombre" de tipo string
  nombre: string;
  // Declara una propiedad "edad" de tipo number
  edad: number;
  // Declara una propiedad "casado" de tipo boolean
  casado: boolean;

  // Define el constructor de la clase, que acepta tres argumentos: nombre, edad y casado
  constructor(nombre: string, edad: number, casado: boolean) {
    // Asigna el valor del argumento "nombre" a la propiedad "nombre" de la instancia
    this.nombre = nombre;
    // Asigna el valor del argumento "edad" a la propiedad "edad" de la instancia
    this.edad = edad;
    // Asigna el valor del argumento "casado" a la propiedad "casado" de la instancia
    this.casado = casado;
  }

  // Define un método llamado "myMetodo" que retorna un string
  myMetodo(): string {
    // Retorna un string
    return "Este metodo simplemente retorna un string";
  }
}

// Crea una nueva instancia de la clase "Persona" llamada "persona"
const persona: Persona = new Persona("juan", 12, false);

Herencia

Sí. Aunque no lo creas, puedes usar herencia con TypeScript y es ridículamente fácil. Eso sí, recuerda que si la clase padre tiene un constructor con parámetros, la subclase debe pasarle esos argumentos mediante super():

// Define una clase llamada "Estudiante" que hereda de la clase "Persona"
class Estudiante extends Persona {
  // Declara una propiedad "universidad" de tipo string
  universidad: string;

  // Define el constructor de la clase "Estudiante"
  constructor(nombre: string, edad: number, casado: boolean, universidad: string) {
    // Llama al constructor de la clase padre "Persona" con sus argumentos
    super(nombre, edad, casado);
    // Asigna la propiedad propia de "Estudiante"
    this.universidad = universidad;
  }
}

Cómo usar TypeScript en tus proyectos

Después de haber instalado TypeScript, debes crear tu archivo nombre.ts. Fíjate que termina en .ts, porque es la notación específica de TypeScript. Una vez que tengas esto, puedes correr el comando:

tsc nombre.ts

Verás que te crea un archivo llamado nombre.js en la misma carpeta donde esté tu archivo .ts. Es este archivo el que puedes incluir en tus proyectos, independientemente de que estés usando Angular o no.

Otra característica de TypeScript es que, como te dije, puedes elegir a qué versión de ECMAScript se transpila tu código. Para ello puedes crear un archivo tsconfig.json y ajustar las siguientes opciones:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "sourceMap": true,
    "removeComments": false,
    "strict": true
  }
}

Nota sobre decoradores. Antes era común ver "experimentalDecorators": true y "emitDecoratorMetadata": true en este archivo. Los decoradores ya son una propuesta estandarizada (Stage 3) y TypeScript 5.x soporta la sintaxis estándar de forma nativa, sin esas banderas. Solo necesitas activar experimentalDecorators si trabajas con un framework que aún depende de los decoradores heredados, como Angular.

Si usas este archivo, puedes ejecutar simplemente el comando:

tsc

Así, transpilará todos los archivos con extensión .ts a .js sin necesidad de especificarlos uno por uno.

Y eso es todo. Recuerda que este post hace parte de una serie de tutoriales sobre Angular. Aunque no vimos mucho sobre Angular en este post, te aseguro que estos principios nos servirán para continuar en el aprendizaje de Angular.

Conclusiones

TypeScript permite transpilar archivos .ts a .js para incluirlos fácilmente en proyectos con Angular o sin él.
A través de un archivo tsconfig.json puedes configurar opciones específicas de la compilación, como la versión de ECMAScript de salida o la eliminación de comentarios.
El verdadero valor de TypeScript es el tipado estático opcional, que te ayuda a detectar errores antes de ejecutar el código y a escribir aplicaciones más mantenibles.

Ejercicios propuestos

Crea un proyecto simple utilizando TypeScript. Configura un archivo tsconfig.json que transpile tu código a ES2022.
Añade comentarios en tus archivos .ts y modifica el archivo tsconfig.json para que los elimine al compilar.
Crea una clase en TypeScript que use herencia (recuerda pasar los argumentos al super()) y prueba su funcionamiento.

Resumen en 3 puntos

TypeScript es un superset de JavaScript creado por Microsoft que añade tipado estático opcional y se transpila a JavaScript estándar.
El archivo tsconfig.json te permite configurar cómo se compilan tus archivos .ts y a qué versión de ECMAScript se transpilan.
Conocer cómo utilizar TypeScript te ayudará a avanzar en el desarrollo con Angular y a crear aplicaciones más eficientes y bien estructuradas.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente.

Si tienes alguna duda, no dudes en dejarme un comentario aquí abajo. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo. ¡Buena suerte!