Implementing Strong Typing with Angular Interfaces
Understand how to use TypeScript interfaces effectively to enforce type safety in Angular applications.
0 likes
190 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; }"
}
}
]
}