Portfolio aufpeppen: 5 TypeScript-Projekte, die Arbeitgeber beeindrucken

Warum TypeScript Ihr stärkster Trumpf im Portfolio ist?

Die Welt von JavaScript ist der Wilde Westen. Dynamische Typisierung schenkt Freiheit, verwandelt Code aber oft in ein Glücksspiel. TypeScript kommt wie der Sheriff, der Ordnung schafft. Wenn Sie nicht nur Code schreiben, sondern zuverlässige, skalierbare Systeme bauen wollen, dann sprechen TypeScript-Projekte in Ihrem Portfolio für sich.

Stellen Sie sich vor: Sie kommen zu einem Vorstellungsgespräch. Alle anderen haben standardmäßige TODO-Listen in React. Sie aber haben einen fully-typed Telegram-Bot mit Authentifizierung, einen Echtzeit-Chat oder Ihren eigenen kleinen Compiler. Geben Sie zu, das klingt gewichtiger. In diesem Artikel analysieren wir 5 Ideen für ein TypeScript-Portfolio, die nicht nur Ihre Fähigkeiten verbessern, sondern auch Recruiter auf Ihrem GitHub verweilen lassen.

Auswahlkriterien: Was macht ein Projekt „top“?

Bevor wir in den Code eintauchen, lassen Sie uns eines klären. Ein gutes TypeScript-Pet-Projekt sollte:

\n
• Ein reales Problem lösen (oder dies zumindest imitieren).
\n
• Fortgeschrittene TS-Features nutzen: Generics, Decorators, Utility Types.
\n
• Tests haben – Codeabdeckung zeigt Ihre Verantwortung.
\n
• Dokumentiert sein – eine README mit Installations- und Nutzungsbeispielen.
\n

Bereit? Los geht's!

1. Telegram-Bot zur Finanzverwaltung mit vollständiger Typisierung

Bots sind ein Klassiker. Aber einen Bot in TypeScript mit einer soliden Architektur zu erstellen, ist bereits eine Herausforderung. Wir hängen nicht einfach einen Handler an „Hallo“ an, sondern bauen einen Microservice mit DI-Containern und strengen Modellen.

Was steckt drin?

\n
• Datenbank (SQLite oder PostgreSQL) mit TypeORM.
\n
• Befehle: /add_expense, /stats, /budget.
\n
• Ausgabenkategorien via Enum.
\n

Codebeispiel: Typisiertes Modell und Befehl

// 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(`✅ Hinzugefügt: ${amount} Rub. in Kategorie ${category}`);\n}\n

Warum ist das cool? Sie zeigen die Fähigkeit, mit einer Datenbank über ein ORM zu arbeiten, Verständnis für Asynchronität und strenge Datentypisierung. Plus: ein reales Anwendungsszenario.

2. Echtzeit-Aufgabentafel (Kanban) mit WebSocket + React

Eine TODO-Liste zu erstellen ist langweilig. Einen Mehrbenutzer-Kanban mit Drag-and-Drop und WebSocket in TypeScript zu bauen, ist schon interessant. Hier zeigen Sie sich als Fullstack-Entwickler.

Architektur

\n
• Backend: Express + Socket.io + TypeScript.
\n
• Frontend: React + react-beautiful-dnd + Redux Toolkit.
\n
• Typisierung aller Ereignisse (Socket-Events als Union Types).
\n

Beispiel: Typisierter WebSocket-Handler

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