TypeScript

Allgemeine Best-Practices für saubere Typisierung und Codequalität in TypeScript-Projekten.

Original-Beschreibung der Autoren: TypeScript coding standards and best practices for modern web development

Die Regel

---
description: "TypeScript coding standards and best practices for modern web development"
globs: **/*.ts, **/*.tsx, **/*.d.ts
alwaysApply: false
---
# TypeScript Best Practices

## Type System
- Prefer interfaces over types for object definitions
- Use type for unions, intersections, and mapped types
- Avoid using `any`, prefer `unknown` for unknown types
- Use strict TypeScript configuration
- Leverage TypeScript's built-in utility types
- Use generics for reusable type patterns

## Naming Conventions
- Use PascalCase for type names and interfaces
- Use camelCase for variables and functions
- Use UPPER_CASE for constants
- Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
- Prefix interfaces for React props with 'Props' (e.g., ButtonProps)

## Code Organization
- Keep type definitions close to where they're used
- Export types and interfaces from dedicated type files when shared
- Use barrel exports (index.ts) for organizing exports
- Place shared types in a `types` directory
- Co-locate component props with their components

## Functions
- Use explicit return types for public functions
- Use arrow functions for callbacks and methods
- Implement proper error handling with custom error types
- Use function overloads for complex type scenarios
- Prefer async/await over Promises

## Best Practices
- Enable strict mode in tsconfig.json
- Use readonly for immutable properties
- Leverage discriminated unions for type safety
- Use type guards for runtime type checking
- Implement proper null checking
- Avoid type assertions unless necessary

## Error Handling
- Create custom error types for domain-specific errors
- Use Result types for operations that can fail
- Implement proper error boundaries
- Use try-catch blocks with typed catch clauses
- Handle Promise rejections properly

## Patterns
- Use the Builder pattern for complex object creation
- Implement the Repository pattern for data access
- Use the Factory pattern for object creation
- Leverage dependency injection
- Use the Module pattern for encapsulation

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese allgemeine Cursor-Regel bündelt grundlegende TypeScript-Best-Practices: saubere Typisierung statt any, sinnvolle Interface- und Type-Nutzung, konsistente Namensgebung und aufgeräumte Dateistruktur. Sie eignet sich als solide Basis für praktisch jedes TypeScript-Projekt und sorgt dafür, dass von der KI generierter Code von Anfang an idiomatisch und wartbar ist, statt später mühsam nachgebessert werden zu müssen. Für Projekte mit sehr spezifischen Anforderungen, etwa strengen Linting-Regeln oder Framework-Eigenheiten, ist sie eher der Grundstein, der durch spezialisierte Regeln ergänzt werden sollte, nicht deren Ersatz.

Praxis-Tipp

Kombinieren Sie sie mit einer framework-spezifischen Regel wie Angular TypeScript, statt sie als einzige Typisierungsvorgabe im Projekt zu nutzen.

Siehe auch

• Angular TypeScript

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …