5 questions found
Why does Angular use TypeScript instead of plain JavaScript, and what benefit does it provide?
Beginner
TypeScript adds type checking to JavaScript, catching many common mistakes, like passing the wrong kind of value to a component, before the code even runs, right inside your code editor. This makes larger Angular codebases easier to maintain and helps new developers understand exactly what data a component or service expects.
@Component({
selector: 'app-user-card',
template: `<p>{{ name }} is {{ age }} years old</p>`
})
export class UserCardComponent {
@Input() name!: string;
@Input() age!: number;
}
Real-world example
A team catches a bug before it ever reaches production, where a component was accidentally passed a string instead of the expected number for a user's age, thanks to TypeScript immediately flagging the mismatch right inside the code editor.
Common follow-ups: Does Angular require TypeScript, or could you technically build an Angular app in plain JavaScript?;What is the difference between a type and an interface in TypeScript?
Components & Templates;Angular Style Guide & Best Practices
How do you properly type a signal in Angular using TypeScript?
Intermediate
TypeScript usually figures out the correct type automatically based on the initial value you give the signal function, but you can also specify the type explicitly inside angle brackets, which is especially useful when the initial value is null but the signal will later hold a specific object type.
// TypeScript infers this is a number automatically
count = signal(0);
// Explicitly typed, useful when starting with null
type User = { name: string; age: number };
user = signal<User | null>(null);
Real-world example
A profile component correctly types its user signal as either a User object or null, letting TypeScript warn the developer immediately if they try to access user's name without first checking that it is not null.
Common follow-ups: Why is it necessary to explicitly type a signal when the initial value is null?;How does TypeScript help prevent a common bug where you forget to check if a value is null before using it?
Angular Signals;State Management
How would you define a strongly typed interface for data returned from an API, and use it throughout an Angular service?
Intermediate
You define an interface describing the exact shape of the expected data, and use it as the generic type parameter when calling HttpClient methods, letting TypeScript check that your code correctly handles the fields that actually exist on the response, and catch typos in property names immediately.
interface User {
id: number;
name: string;
email: string;
}
getUser(id: number) {
return this.http.get<User>(`/api/users/${id}`);
}
Real-world example
A user profile service defines a User interface matching exactly what the backend API returns, letting TypeScript immediately flag an error anywhere in the codebase that tries to access a property that does not actually exist on that interface.
Common follow-ups: What happens if the backend API's actual response shape does not match the defined interface?;Should you use an interface or a type alias for describing this kind of data shape?
HTTP Client & Interceptors;Services & Dependency Injection
How would you create a reusable, generic Angular component using TypeScript, such as a list component that works with any data type?
Advanced
TypeScript generics let a component's input types adapt to whatever specific data type is actually passed in, letting you write one flexible list component that works correctly and safely whether it is displaying a list of strings, numbers, or custom objects, with full type checking still applying.
@Component({
selector: 'app-generic-list',
template: `@for (item of items(); track $index) { <ng-container [ngTemplateOutlet]="itemTemplate()" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container> }`
})
export class GenericListComponent<T> {
items = input.required<T[]>();
itemTemplate = input.required<TemplateRef<any>>();
}
Real-world example
A design system builds a single generic list component that safely works for a list of product objects on one page and a list of plain usernames on another, with TypeScript correctly checking each usage differently based on the actual data type passed in.
Common follow-ups: How does TypeScript know what type T actually is in a specific usage of this component?;When is it worth the extra complexity of making a component generic versus keeping it more specific?
Components & Templates;Design Patterns in Angular
What does strict mode in Angular's TypeScript configuration do, and why is it recommended?
Beginner
Strict mode enables a stricter set of TypeScript checks, such as disallowing implicit any types and requiring null checks before using a potentially null value, catching more potential bugs at compile time rather than letting them surface later as runtime errors in production.
// tsconfig.json
{
"compilerOptions": {
"strict": true
}
}
Real-world example
A team enables strict mode on a new Angular project from the very beginning, catching several potential null reference errors during development that would have otherwise only appeared as confusing runtime crashes for real users later.
Common follow-ups: What specific individual checks does enabling strict mode actually turn on?;Is it difficult to enable strict mode on an existing, older project that was not built with it from the start?
Angular CLI & Project Structure;Angular Style Guide & Best Practices