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; }" } } ] }