How do you effectively use TypeScript features such as strict mode, type guards, and conditional types in Angular applications? — Angular Interview Question #76

Using TypeScript features like strict mode, type guards, and conditional types can greatly improve the reliability and maintainability of your Angular applications. Below, I’ll break down how to use each feature effectively in Angular:

1. Strict mode:

Enabling the strict mode performs additional checks through the TypeScript compiler and helps identify potential issues in your code. To enable it, open the ‘tsconfig.json‘ file in your Angular project and set the ‘strict‘ property to ‘true‘:

{
  "compilerOptions": {
    "strict": true,
    ...
  }
}

When using strict mode, you’ll enforce stricter type-checking rules, like ensuring all variables are properly initialized, making sure class properties have correct type annotations, and preventing ‘null‘ and ‘undefined‘ values without proper checks.

2. Type guards:

Type guards are functions that perform runtime type checks, allowing the TypeScript compiler to narrow down the type of a variable within a specific block scope. To create a custom type guard, define a function with a type predicate as its return type:

interface Car {
  make: string;
  model: string;
}

interface Plane {
  manufacturer: string;
  type: string;
}

function isCar(vehicle: Car | Plane): vehicle is Car {
  return (vehicle as Car).make !== undefined && (vehicle as Car).model !== undefined;
}

In this example, ‘isCar‘ checks if the provided ‘vehicle‘ has the ‘make‘ and ‘model‘ properties, indicating that it is of type ‘Car‘. You can then use this type guard in your code:

function showVehicle(vehicle: Car | Plane): string {
  if (isCar(vehicle)) {
    return `${vehicle.make} ${vehicle.model}`; // TypeScript knows vehicle is of type Car here
  } else {
    return `${vehicle.manufacturer} ${vehicle.type}`; // TypeScript knows vehicle is of type Plane here
  }
}

3. Conditional types:

Conditional types enable you to create more flexible and dynamic types based on existing types and their relationships. They use the conditional (ternary) operator to define a type that resolves to one type or another, depending on a condition.

Consider an example in which we want to extract the type of a Promise’s result:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

‘UnwrapPromise‘ is a conditional type that checks if ‘T‘ extends ‘Promise‘. If it does, it extracts the type of the Promise’s result using ‘infer‘. If not, it returns ‘T‘ unchanged.

Here’s how to use ‘UnwrapPromise‘:

type StringType = UnwrapPromise<string>; // StringType is 'string'
type NumberType = UnwrapPromise<Promise<number>>; // NumberType is 'number'

When applying these TypeScript features in Angular, you can make your services, components, and directives more robust and maintainable by providing strict types and leveraging the power of type guards and conditional types to handle complex typing scenarios.