Potencia tu portafolio: 5 proyectos en TypeScript que impresionarán al empleador

¿Por qué TypeScript es tu mejor baza en el portafolio?

El mundo de JavaScript es el lejano oeste. La tipificación dinámica da libertad, pero a menudo convierte el código en una ruleta. TypeScript llega como el sheriff que pone orden. Si no solo quieres escribir código, sino construir sistemas robustos y escalables — los proyectos en TypeScript en tu portafolio hablarán por ti.

Imagina: llegas a una entrevista. Todos los demás tienen listas TODO estándar en React. Y tú tienes — un bot de Telegram fully-typed con autenticación, un chat en tiempo real o tu propio pequeño compilador. ¿Verdad que suena más impactante? En este artículo analizaremos 5 ideas para un portafolio en TypeScript que no solo mejorarán tus habilidades, sino que harán que los reclutadores se queden enganchados en tu GitHub.

Criterios de selección: ¿qué hace que un proyecto sea «top»?

Antes de sumergirnos en el código, pongámonos de acuerdo. Un buen pet-proyecto en TypeScript debe:

\n
• Resolver un problema real (o al menos simularlo).
\n
• Usar características avanzadas de TS: genéricos, decoradores, utility types.
\n
• Tener pruebas — la cobertura de código muestra tu responsabilidad.
\n
• Estar documentado — un README con ejemplos de instalación y uso.
\n

¿Listos? ¡Allá vamos!

1. Bot de Telegram para gestión financiera con tipificación completa

Los bots son un clásico. Pero hacer un bot en TypeScript con una arquitectura sólida ya es un desafío. No solo pondremos un manejador para "Hola", sino que construiremos un microservicio con contenedores DI y modelos estrictos.

¿Qué incluye?

\n
• Base de datos (SQLite o PostgreSQL) con TypeORM.
\n
• Comandos: /add_expense, /stats, /budget.
\n
• Categorías de gastos mediante enum.
\n

Ejemplo de código: modelo y comando tipificados

// models/Expense.ts\nimport { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn } from 'typeorm';\nimport { Category } from './enums';\n\n@Entity()\nexport class Expense {\n    @PrimaryGeneratedColumn()\n    id!: number;\n\n    @Column()\n    userId!: number;\n\n    @Column('decimal', { precision: 10, scale: 2 })\n    amount!: number;\n\n    @Column({\n        type: 'enum',\n        enum: Category,\n        default: Category.OTHER\n    })\n    category!: Category;\n\n    @CreateDateColumn()\n    createdAt!: Date;\n}\n\n// commands/addExpense.ts\nimport { Context } from 'telegraf';\nimport { getRepository } from 'typeorm';\nimport { Expense } from '../models/Expense';\nimport { Category } from '../models/enums';\n\nexport async function addExpense(ctx: Context, amount: number, category: Category) {\n    const repo = getRepository(Expense);\n    const expense = repo.create({\n        userId: ctx.from!.id,\n        amount,\n        category\n    });\n    await repo.save(expense);\n    await ctx.reply(`✅ Añadido: ${amount} RUB en la categoría ${category}`);\n}\n

¿Por qué es genial? Muestras habilidad para trabajar con bases de datos mediante ORM, comprensión de la asincronía y tipificación estricta de datos. Además, un escenario de uso real.

2. Tablero de tareas en tiempo real (Kanban) con WebSocket + React

Hacer una lista TODO es aburrido. Hacer un Kanban multiusuario con drag-and-drop y WebSocket en TypeScript ya es interesante. Aquí te muestras como desarrollador fullstack.

Arquitectura

\n
• Backend: Express + Socket.io + TypeScript.
\n
• Frontend: React + react-beautiful-dnd + Redux Toolkit.
\n
• Tipificación de todos los eventos (eventos socket como union types).
\n

Ejemplo: manejador WebSocket tipificado

// types/socket-events.ts\nexport interface ServerToClientEvents {\n    taskMoved: (task: Task, fromColumn: ColumnId, toColumn: ColumnId) => void;\n    newTask: (task: Task) => void;\n}\n