Impulsione seu portfólio: 5 projetos em TypeScript que impressionarão o empregador

Por que o TypeScript é seu principal trunfo no portfólio?

O mundo do JavaScript é o velho oeste. A tipagem dinâmica dá liberdade, mas muitas vezes transforma o código em uma roleta. O TypeScript chega como o xerife que coloca ordem. Se você quer não apenas escrever código, mas construir sistemas confiáveis e escaláveis — projetos em TypeScript no seu portfólio falarão por si.

Imagine: você vai a uma entrevista. Todos os candidatos têm listas de tarefas padrão em React. E você tem um bot do Telegram fully-typed com autenticação, um chat em tempo real ou seu próprio pequeno compilador. Concordo, soa mais impactante. Neste artigo, vamos explorar 5 ideias para portfólio em TypeScript que não apenas aprimorarão suas habilidades, mas farão os recrutadores ficarem vidrados no seu GitHub.

Critérios de seleção: o que torna um projeto "top"?

Antes de mergulhar no código, vamos combinar. Um bom pet-projeto em TypeScript deve:

\n
• Resolver um problema real (ou pelo menos simular isso).
\n
• Usar recursos avançados do TS: genéricos, decoradores, utility types.
\n
• Ter testes — a cobertura de código mostra sua responsabilidade.
\n
• Ser documentado — README com exemplos de instalação e uso.
\n

Pronto? Vamos lá!

1. Bot do Telegram para gerenciamento financeiro com tipagem completa

Bots são clássicos. Mas fazer um bot em TypeScript com uma arquitetura sólida já é um desafio. Não vamos apenas colocar um manipulador para "Olá", mas construir um microsserviço com contêineres DI e modelos estritos.

O que tem dentro?

\n
• Banco de dados (SQLite ou PostgreSQL) com TypeORM.
\n
• Comandos: /add_expense, /stats, /budget.
\n
• Categorias de despesas via enum.
\n

Exemplo de código: modelo e comando tipados

// 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(`✅ Adicionado: ${amount} reais na categoria ${category}`);\n}\n

Por que é incrível? Você demonstra habilidade em trabalhar com banco de dados via ORM, compreensão de assincronicidade e tipagem rigorosa de dados. Além disso, é um cenário de uso real.

2. Quadro de tarefas em tempo real (Kanban) com WebSocket + React

Fazer uma lista de tarefas é chato. Fazer um Kanban multiusuário com drag-and-drop e WebSocket em TypeScript já é interessante. Aqui você se revela como desenvolvedor fullstack.

Arquitetura

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

Exemplo: manipulador WebSocket tipado

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