TypeScript AI Rules

Comprehensive AI rules and patterns for TypeScript development

TypeScript AI Rules Overview

AI rules for TypeScript development focus on leveraging type safety, modern patterns, and best practices to generate high-quality, maintainable code. These rules guide AI assistants in understanding and working with TypeScript's type system, interfaces, and advanced features.

Code Style and Structure

Naming Conventions

{
  "typescript.naming": {
    "interfaces": "PascalCase with 'I' prefix",
    "types": "PascalCase",
    "enums": "PascalCase",
    "variables": "camelCase",
    "functions": "camelCase",
    "constants": "UPPER_SNAKE_CASE",
    "private": "_camelCase"
  }
}

Type Definitions

{
  "typescript.types": {
    "preference": "interfaces-over-types",
    "unions": "discriminated",
    "generics": "constrained-when-possible",
    "arrays": "Array<T>-over-brackets",
    "objects": "explicit-property-types"
  }
}

Best Practices

Type Safety

Use strict type checking (strict: true)
Avoid any type unless absolutely necessary
Leverage union types for better type safety
Use type guards for runtime type checking
Implement proper error handling with typed errors

Modern Patterns

{
  "typescript.patterns": {
    "functions": {
      "prefer": "arrow-functions",
      "parameters": "typed-parameters",
      "returns": "explicit-return-types"
    },
    "classes": {
      "usage": "avoid-when-possible",
      "preference": "functional-approach"
    },
    "async": {
      "prefer": "promises-over-callbacks",
      "handling": "async-await",
      "errors": "typed-catch-blocks"
    }
  }
}

Code Organization

{
  "typescript.organization": {
    "imports": {
      "style": "named-exports",
      "grouping": [
        "node-builtin",
        "external",
        "internal",
        "parent",
        "sibling",
        "index"
      ]
    },
    "declarations": {
      "order": [
        "interfaces",
        "types",
        "enums",
        "constants",
        "functions"
      ]
    }
  }
}

Framework Integration

React with TypeScript

{
  "typescript.react": {
    "components": {
      "style": "functional",
      "props": "interface-based",
      "generics": "for-reusable-components"
    },
    "hooks": {
      "typing": "explicit-generics",
      "state": "discriminated-unions"
    }
  }
}

Next.js with TypeScript

{
  "typescript.nextjs": {
    "pages": "use-getStaticProps-typing",
    "api": "typed-request-response",
    "routing": "type-safe-routes"
  }
}

Testing Patterns

{
  "typescript.testing": {
    "framework": "jest-with-ts-jest",
    "patterns": {
      "mocks": "typed-jest-mocks",
      "assertions": "type-aware-expects",
      "fixtures": "typed-test-data"
    }
  }
}

Performance Considerations

{
  "typescript.performance": {
    "types": {
      "size": "minimal-type-unions",
      "imports": "type-only-imports",
      "generics": "constrained-type-parameters"
    },
    "compilation": {
      "isolatedModules": true,
      "skipLibCheck": true
    }
  }
}

Example Usage

Here's a practical example demonstrating these rules in action:

// Type-safe error handling
interface ApiError extends Error {
  code: string;
  status: number;
}

// Discriminated union for state management
type RequestState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: ApiError };

// Generic constraint example
interface DataService<T extends Record<string, unknown>> {
  fetch(): Promise<T>;
  update(data: Partial<T>): Promise<T>;
}

// React component with proper typing
interface UserCardProps {
  user: {
    id: string;
    name: string;
    email: string;
  };
  onUpdate: (id: string) => Promise<void>;
}

const UserCard: React.FC<UserCardProps> = ({ user, onUpdate }) => {
  const handleUpdate = async () => {
    try {
      await onUpdate(user.id);
    } catch (error) {
      console.error(error as ApiError);
    }
  };

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
};

IDE Integration

These rules work seamlessly with TypeScript-aware IDEs and can be enhanced with additional tooling:

ESLint with @typescript-eslint
Prettier with TypeScript support
TypeScript-specific code snippets
Type-aware refactoring tools

Remember to keep your TypeScript version up to date and regularly review these rules as new TypeScript features become available.

Python AI Rules

Comprehensive AI rules and patterns for Python development

Elixir Cursor Rules

Learn about cursor rules specific to Elixir development.

TypeScript AI Rules