Curso de programación con TypeScript
TypeScript, el superset de JavaScript que mejora la seguridad y la escalabilidad del código. Aprende a desarrollar con TypeScript hoy.
TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft que se basa en JavaScript. Añade tipado estático opcional y otras características avanzadas al lenguaje, lo que facilita el desarrollo de aplicaciones grandes y complejas. Al compilarse, TypeScript se convierte en JavaScript estándar, por lo que puede ejecutarse en cualquier entorno que soporte JavaScript.
¿Qué es TypeScript?
TypeScript es un superconjunto de JavaScript que incorpora tipos estáticos y herramientas de desarrollo más robustas. Permite detectar errores en tiempo de compilación, mejorar la legibilidad del código y facilitar el mantenimiento a largo plazo. Es especialmente útil en proyectos a gran escala donde la consistencia y la escalabilidad son fundamentales.
Ventajas de utilizar TypeScript
- Tipado estático: Ayuda a identificar errores antes de ejecutar el código.
- Mejor autocompletado: Los editores pueden proporcionar sugerencias más precisas.
- Interfaces y clases avanzadas: Facilitan la programación orientada a objetos.
- Compatibilidad con JavaScript: Todo código JavaScript válido es también válido en TypeScript.
Instalación de TypeScript
Para instalar TypeScript, necesitas tener Node.js y npm instalados. Luego, puedes instalar el compilador de TypeScript de manera global:
npm install -g typescript
Para verificar la instalación:
tsc --version
Configuración inicial
Archivo tsconfig.json
Este archivo configura el comportamiento del compilador de TypeScript. Puedes generarlo automáticamente con:
tsc --init
Ejemplo básico de tsconfig.json
:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"outDir": "./dist"
},
"include": ["src/**/*"]
}
Sintaxis básica y tipos
Tipos primitivos
- string
- number
- boolean
- any
- void
- null y undefined
Declaración de variables
let mensaje: string = "Hola, TypeScript";
let numero: number = 42;
let esActivo: boolean = true;
Arreglos y tuplas
Arreglos
let listaNumeros: number[] = [1, 2, 3];
Tuplas
let par: [string, number] = ["edad", 30];
Enums
enum Color {
Rojo,
Verde,
Azul
}
let colorFavorito: Color = Color.Verde;
Funciones en TypeScript
Tipado de parámetros y retorno
function sumar(a: number, b: number): number {
return a + b;
}
Parámetros opcionales y por defecto
function construirNombre(nombre: string, apellido?: string): string {
return apellido ? `${nombre} ${apellido}` : nombre;
}
Funciones flecha
const multiplicar = (x: number, y: number): number => x * y;
Interfaces
Las interfaces definen contratos para clases y objetos.
interface Persona {
nombre: string;
edad: number;
saludar(): void;
}
let juan: Persona = {
nombre: "Juan",
edad: 25,
saludar() {
console.log(`Hola, me llamo ${this.nombre}`);
}
};
Clases y herencia
Clases
class Animal {
nombre: string;
constructor(nombre: string) {
this.nombre = nombre;
}
mover(distancia: number = 0) {
console.log(`${this.nombre} se movió ${distancia} metros.`);
}
}
Herencia
class Perro extends Animal {
ladrar() {
console.log("¡Guau!");
}
}
const miPerro = new Perro("Fido");
miPerro.ladrar();
miPerro.mover(10);
Modificadores de acceso
- public: Accesible desde cualquier lugar.
- private: Solo accesible dentro de la clase.
- protected: Accesible dentro de la clase y clases derivadas.
class Persona {
private dni: string;
public nombre: string;
constructor(nombre: string, dni: string) {
this.nombre = nombre;
this.dni = dni;
}
protected mostrarDNI() {
console.log(`Mi DNI es ${this.dni}`);
}
}
Generics (Genéricos)
Permiten crear componentes que funcionan con varios tipos.
function identidad<T>(arg: T): T {
return arg;
}
let salida = identidad<string>("Hola");
Módulos y espacios de nombres
Módulos
Los módulos ayudan a organizar el código y a reutilizarlo.
// en archivo matematicas.ts
export function sumar(a: number, b: number): number {
return a + b;
}
// en archivo principal.ts
import { sumar } from './matematicas';
console.log(sumar(2, 3));
Espacios de nombres
Agrupan código bajo un mismo identificador.
namespace Geometria {
export namespace Areas {
export function cuadrado(lado: number): number {
return lado * lado;
}
}
}
let area = Geometria.Areas.cuadrado(5);
Tipos avanzados
Union Types
Permiten que una variable tenga más de un tipo.
let identificador: number | string;
identificador = 10;
identificador = "ABC123";
Type Aliases
Definen nombres personalizados para tipos.
type ID = number | string;
let usuarioID: ID = 123;
Compilación y herramientas
Compilación manual
tsc archivo.ts
Compilación automática
Usando el modo watch:
tsc archivo.ts -w
Integración con bundlers
TypeScript se integra bien con herramientas como Webpack o Parcel para la construcción de aplicaciones.
Integración con librerías JavaScript
Para utilizar librerías escritas en JavaScript, es posible instalar sus definiciones de tipos.
npm install @types/lodash
Luego, puedes importarlas con seguridad de tipos:
import * as _ from 'lodash';
_.chunk(['a', 'b', 'c', 'd'], 2);
Configuración avanzada
Strict Mode
Activar el modo estricto en tsconfig.json
ayuda a detectar más errores.
{
"compilerOptions": {
"strict": true
}
}
Decoradores
Característica experimental que permite añadir metadatos a clases y miembros.
function log(constructor: Function) {
console.log(`Clase creada: ${constructor.name}`);
}
@log
class MiClase {
// ...
}
Buenas prácticas
- Usar tipado estricto: Evita errores y mejora la legibilidad.
- Evitar
any
cuando sea posible: Utilizar tipos específicos. - Organizar el código en módulos: Facilita el mantenimiento.
- Documentar el código: Ayuda a otros desarrolladores a entender la intención.
- Mantener actualizadas las dependencias: Evita problemas de compatibilidad.
Recursos adicionales
- Sitio oficial de TypeScript: typescriptlang.org
Tutoriales de TypeScript
Aprende TypeScript con tutoriales de programación en TypeScript.
Introducción A Typescript
Introducción Y Entorno
Tipos De Datos, Variables Y Constantes
Sintaxis
Operadores Y Expresiones
Sintaxis
Control De Flujo
Sintaxis
Funciones Y Parámetros Tipados
Sintaxis
Funciones Flecha Y Contexto
Sintaxis
Clases Y Objetos
Programación Orientada A Objetos
Interfaces Y Su Implementación
Programación Orientada A Objetos
Modificadores De Acceso Y Encapsulación
Programación Orientada A Objetos
Herencia Y Clases Abstractas
Programación Orientada A Objetos
Polimorfismo
Programación Orientada A Objetos
Inmutabilidad
Programación Funcional
Funciones Puras
Programación Funcional
Funciones De Primera Clase
Programación Funcional
Funciones De Alto Orden
Programación Funcional
Tipos Literales
Tipos Intermedios Y Avanzados
Tipos Genéricos
Tipos Intermedios Y Avanzados
Tipos De Unión E Intersección
Tipos Intermedios Y Avanzados
Tipos De Utilidad
Tipos Intermedios Y Avanzados
Módulos
Namespaces Y Módulos
Namespaces
Namespaces Y Módulos
Resolución De Módulos
Namespaces Y Módulos
Ejercicios de programación de TypeScript
Evalúa tus conocimientos en TypeScript con ejercicios de programación TypeScript de tipo Test, Puzzle, Código y Proyecto con VSCode.
Funciones
Funciones de primera clase
Clases
OOP y CRUD en TypeScript
Tipos genéricos
Namespaces
Módulos
Funciones TypeScript
Encapsulación
Tipos de unión e intersección
Interfaces
Tipos de unión e intersección
Funciones puras
Variables y constantes
Funciones flecha
Funciones puras
Control de flujo
Resolución de módulos
Control de flujo
Polimorfismo
Operadores
Funciones flecha
Herencia
Tipos de utilidad
Clases y objetos
Clases
Operadores
Encapsulación
Herencia
Funciones
Funciones de alto orden
Inmutabilidad
Interfaces
Funciones de alto orden
Tipos literales
Tipos de utilidad
Control de flujo
Polimorfismo
Interfaces
Tipos genéricos
Tipos literales
Inmutabilidad
Herencia de clases
Variables y constantes
Variables y constantes
Funciones de primera clase
Introducción a TypeScript
Tipo de tecnología
Lenguaje
Categoría laboral
Full Stack
Año de lanzamiento
2012
Developers
Microsoft
Todos los módulos de TypeScript
TypeScript
Introducción y entorno
TypeScript
Sintaxis
TypeScript
Programación Orientada a Objetos
TypeScript
Programación Funcional
TypeScript
Tipos intermedios y avanzados
TypeScript
Namespaces y Módulos
TypeScript
Testing
Otras tecnologías
Vuejs
Vuejs
Frontend
Framework de JS progresivo para construir interfaces de usuario reactivas y modulares.
C
C
Backend
Lenguaje de propósito general, eficiente y de bajo nivel.
Django
Django
Backend
Framework web Python para desarrollo rápido y seguro.
Laravel
Laravel
Backend
Framework de PHP para desarrollo web backend.
Go
Go
Backend
Lenguaje de programación eficiente y concurrente creado por Google.
PySpark
PySpark
Big Data
Motor unificado de análisis de datos distribuido para grandes volúmenes.
ScikitLearn
ScikitLearn
Ciencia de Datos e IA
Biblioteca de aprendizaje automático en Python.
Java
Java
Backend
Lenguaje de programación versátil y multiplataforma.
OpenCV
OpenCV
Ciencia de Datos e IA
Biblioteca de Python para Computer Vision en imágenes y vídeos.
Node
Node
Backend
Node.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google.
Flask
Flask
Backend
Microframework web para Python, simple y flexible.
Nest
Nest
Backend
Framework Node.js para crear aplicaciones escalables y eficientes.
PHP
PHP
Backend
Lenguaje de programación para desarrollo web del lado del servidor.
React
React
Frontend
Librería framework para frontend interfaces de usuario.
Selenium
Selenium
Testing / QA
Suite de herramientas open-source para automatizar navegadores web y pruebas de software de interfaz de usuario.
CSharp
CSharp
Backend
Lenguaje de programación de Microsoft para aplicaciones robustas.
SpringBoot
SpringBoot
Backend
Framework para desarrollo rápido de aplicaciones Java.
Docker
Docker
DevOps
Plataforma de contenedores para aplicaciones portátiles.
Seaborn
Seaborn
Ciencia de Datos e IA
Biblioteca de visualización de datos para Python.
Streamlit
Streamlit
Ciencia de Datos e IA
Biblioteca Python para prototipado web UI rápido en ciencia de datos.
SQL
SQL
Bases de datos
Lenguaje para gestionar bases de datos relacionales.
Fundamentos
Fundamentos
Full Stack
Fundamentos y bases de la programación de software moderna.
Git
Git
DevOps
Sistema de control de versiones distribuido.
TailwindCSS
TailwindCSS
Frontend
Framework de utilidades CSS para diseños rápidos y personalizables.
TensorFlow
TensorFlow
Ciencia de Datos e IA
Biblioteca Python para redes neuronales en Deep Learning
Kotlin
Kotlin
Backend
Lenguaje de programación moderno y seguro para aplicaciones Android.
HTML
HTML
Frontend
Lenguaje de marcado para estructurar contenido web.
Numpy
Numpy
Ciencia de Datos e IA
Biblioteca Python para computación científica y matrices.
Bash
Bash
Administración de sistemas
Intérprete de comandos para sistemas Unix y Linux.
Bootstrap
Bootstrap
Frontend
Framework CSS para diseños web responsive y modernos.
Matplotlib
Matplotlib
Ciencia de Datos e IA
Biblioteca Python para crear gráficos y visualizaciones.
Hibernate
Hibernate
Backend
ORM para Java, simplifica el acceso a bases de datos.
JavaScript
JavaScript
Full Stack
Lenguaje de scripting para desarrollo web interactivo.
Pandas
Pandas
Ciencia de Datos e IA
Herramienta Python para análisis y manipulación de datos.
Angular
Angular
Frontend
Framework web de Google para aplicaciones dinámicas.
CSS
CSS
Frontend
Lenguaje de estilo para diseñar páginas web atractivas.
Python
Python
Backend
Lenguaje de programación fácil de aprender y versátil.