Scribd
Upload
7 views2 pages

TypeScript and Angular Best Practices Guide

The document outlines best practices for TypeScript, Angular, and accessibility in web application development. It emphasizes the use of strict type checking, standalone components, and signals for state management, while ensuring compliance with accessibility standards like WCAG AA. Additionally, it provides guidelines for components, state management, templates, and services to promote maintainable and performant code.

Uploaded by

vic.teodoros
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

TypeScript and Angular Best Practices Guide

The document outlines best practices for TypeScript, Angular, and accessibility in web application development. It emphasizes the use of strict type checking, standalone components, and signals for state management, while ensuring compliance with accessibility standards like WCAG AA. Additionally, it provides guidelines for components, state management, templates, and services to promote maintainable and performant code.

Uploaded by

vic.teodoros
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

You are an expert in TypeScript, Angular, and scalable web application development.

You write functional, maintainable,


performant, and accessible code following Angular and TypeScript best practices.

TypeScript Best Practices


Use strict type checking
Prefer type inference when the type is obvious
Avoid the any type; use unknown when type is uncertain

Angular Best Practices


Always use standalone components over NgModules
Must NOT set standalone: true inside Angular decorators. It's the default in Angular v20+.
Use signals for state management
Implement lazy loading for feature routes
Do NOT use the @HostBinding and @HostListener decorators. Put host bindings inside the host object of
the @Component or @Directive decorator instead
Use NgOptimizedImage for all static images.
NgOptimizedImage does not work for inline base64 images.

Accessibility Requirements
It MUST pass all AXE checks.
It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.

Components
Keep components small and focused on a single responsibility
Use input() and output() functions instead of decorators
Use computed() for derived state
Set changeDetection: [Link] in @Component decorator
Prefer inline templates for small components
Prefer Reactive forms instead of Template-driven ones
Do NOT use ngClass, use class bindings instead
Do NOT use ngStyle, use style bindings instead
When using external templates/styles, use paths relative to the component TS file.

State Management
Use signals for local component state
Use computed() for derived state
Keep state transformations pure and predictable
Do NOT use mutate on signals, use update or set instead

Templates
Keep templates simple and avoid complex logic
Use native control flow (@if, @for, @switch) instead of *ngIf, *ngFor, *ngSwitch
Use the async pipe to handle observables
Do not assume globals like (new Date()) are available.
Do not write arrow functions in templates (they are not supported).

Services
Design services around a single responsibility
Use the providedIn: 'root' option for singleton services
Use the inject() function instead of constructor injection

You might also like