Implementing Strong Typing with Angular Interfaces

Understand how to use TypeScript interfaces effectively to enforce type safety in Angular applications.

0 likes
44 views

Rule Content

{
  "title": "Implementing Strong Typing with Angular Interfaces",
  "description": "Understand how to use TypeScript interfaces effectively to enforce type safety in Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-interfaces-usage",
      "description": "Ensure all complex data structures in Angular applications are defined using TypeScript interfaces to enforce type safety and maintainability.",
      "severity": "error",
      "pattern": {
        "type": "object",
        "properties": {
          "id": { "type": "number" },
          "name": { "type": "string" },
          "email": { "type": "string" }
        },
        "required": ["id", "name", "email"]
      },
      "example": {
        "before": "const user = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };",
        "after": "interface User { id: number; name: string; email: string; } const user: User = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };"
      }
    },
    {
      "id": "angular-interfaces-naming",
      "description": "Adhere to consistent naming conventions for interfaces by using PascalCase without the 'I' prefix.",
      "severity": "warning",
      "pattern": {
        "type": "string",
        "pattern": "^[A-Z][a-zA-Z0-9]*$"
      },
      "example": {
        "before": "interface IUser { id: number; name: string; }",
        "after": "interface User { id: number; name: string; }"
      }
    },
    {
      "id": "angular-interfaces-separate-files",
      "description": "Define each interface in a separate file to enhance code organization and maintainability.",
      "severity": "info",
      "pattern": {
        "type": "string",
        "pattern": ".*\\.interface\\.ts$"
      },
      "example": {
        "before": "// user.ts\nexport interface User { id: number; name: string; }",
        "after": "// user.interface.ts\nexport interface User { id: number; name: string; }"
      }
    },
    {
      "id": "angular-interfaces-optional-properties",
      "description": "Use optional properties in interfaces to handle data structures with optional fields.",
      "severity": "info",
      "pattern": {
        "type": "object",
        "properties": {
          "id": { "type": "number" },
          "name": { "type": "string" },
          "email": { "type": "string" },
          "phone": { "type": "string", "optional": true }
        },
        "required": ["id", "name", "email"]
      },
      "example": {
        "before": "interface User { id: number; name: string; email: string; phone: string; }",
        "after": "interface User { id: number; name: string; email: string; phone?: string; }"
      }
    },
    {
      "id": "angular-interfaces-readonly-properties",
      "description": "Use the 'readonly' modifier for properties that should not be reassigned after initialization.",
      "severity": "info",
      "pattern": {
        "type": "object",
        "properties": {
          "id": { "type": "number", "readonly": true },
          "name": { "type": "string" },
          "email": { "type": "string" }
        },
        "required": ["id", "name", "email"]
      },
      "example": {
        "before": "interface User { id: number; name: string; email: string; }",
        "after": "interface User { readonly id: number; name: string; email: string; }"
      }
    },
    {
      "id": "angular-interfaces-inheritance",
      "description": "Utilize interface inheritance to extend existing interfaces and promote code reuse.",
      "severity": "info",
      "pattern": {
        "type": "object",
        "properties": {
          "id": { "type": "number" },
          "name": { "type": "string" }
        },
        "required": ["id", "name"]
      },
      "example": {
        "before": "interface Animal { id: number; name: string; } interface Dog { id: number; name: string; breed: string; age: number; }",
        "after": "interface Animal { id: number; name: string; } interface Dog extends Animal { breed: string; age: number; }"
      }
    }
  ]
}