Working with null values – TypeScript Patterns for Angular

In TypeScript, by default, all function and method parameters are required and checked by the transpiler.
If any parameter is optional, we can define it in the type it represents, as in the following example:

function applyDiscount(
invoice: Invoice,
discountValue: number,
productOfDiscount?: string
) {
discountValue = discountValue / 100;
let newInvoice = invoice.map((item) => {
if (productOfDiscount === undefined || item.product === productOfDiscount) {
item.price = item.price – item.price * discountValue;
}
return item;
});
return newInvoice;
}

Within this function of applying a discount to the invoice, we created an optional parameter that allows the user of the function to determine a product to apply the discount. If the parameter is not defined, the discount is applied to the entire invoice.
To define an optional parameter, we use the ? character. In TypeScript, optional parameters must be the last to be defined in a function. If we change the position of the function parameters the following error is thrown by the transpiler:

error TS1016: A required parameter cannot follow an optional parameter.

Additionally, TypeScript allows you to define a default value for the parameter:

function applyDiscount(
invoice: Invoice,
discountValue = 10,
productOfDiscount?: string
)

When assigning a value in the parameter declaration, if the function user does not use the parameter, a 10% discount will be applied to the invoice items.
We’ve seen how we can use TypeScript to typify function parameters and returns. Now let’s discuss type inference and how we can use it to reduce the verbosity of our code.

Decreasing verbosity – type inference

In this chapter, we saw the best TypeScript capabilities that help in the development of our Angular projects. We were typing all the variables and relying on the TypeScript transpiler to avoid errors that would otherwise occur in our user’s runtime.

Let’s now explore TypeScript’s powerful inference mechanisms. Through it, TypeScript identifies the types of variables by content, not requiring you to define the type explicitly. Let’s observe the following example:
export function primitive_example() {
  let name = “Mario”;
  let age = 9;
  let isAlive = true;
  console.log(`Name:${name} Age:${age} is alive:${isAlive ?
“yes” : “no”}`);
}

This example is the same as in Primitive and basic types, but we directly inform the values in the variables. This way of declaring the variable has the same effect as the explicit method. If you change the value of a variable to another type, TypeScript will perform the validation as in the following example:
TSError: ⨯ Unable to compile TypeScript:
src/basic_types/primitive.ts:6:3 – error TS2322: Type ‘number’ is not assignable to type ‘string’.

TypeScript can also infer complex types, such as arrays and function returns. A good practice here is to use the inference capability to write less code and type only objects from interfaces, for example.