Lars Gyrup Brink Nielsen - Accelerating Angular Development with Ivy: A practical guide to building faster and more testable Angular apps with the new Ivy engine

As its only officially supported programming language, Angular is tightly coupled with TypeScript. Support for new versions of TypeScript is introduced with major and minor version releases of Angular. In this chapter, we will explore three powerful language features that have been released in the recent versions of TypeScript and Angular:

• The optional chaining operator (?.)
• The nullish coalescing operator (??)
• Native private class members (#)

Through simple examples, we will highlight the strengths of these modern programming language features. We will even learn how two of the new operators work elegantly together in common scenarios. Learning about this new syntax and semantics is key to understanding the examples throughout this book.

Globalization is the process of supporting and adapting multilingual and regional capabilities in an application. Angular Ivy introduces improved globalization APIs. Together, we will learn about localization bundling, directionality querying, and lazy loading locale data through comprehensive examples.

Many core parts of Angular are built with testability in mind. Angular Ivy introduces strongly typed dependency resolving in tests and a fake icon registry for integrated component tests.

In this first chapter, we will cover the following topics:

• Modernizing your code with powerful language features
• Optimizing regional support with improved globalization APIs
• Enhancing tests with stronger types and new APIs

The demo application featured in Part 2, Build a Real-World Application with the Angular Ivy Features You Learned does not use globalization APIs. The tests featured in that part focus on component testing using the new concept component testing harnesses, which will be introduced in , Introducing CSS Custom Properties and New Provider Scopes.

After reading this chapter, you will be able to refactor your existing Angular applications and tests to use modern standards and Angular APIs when developing.

To support all the features introduced in this chapter, your application requires at least the following:

• Angular Ivy version 9.1
• TypeScript version 3.8

You can find the complete code examples for the globalization APIs in this book's companion GitHub repository at https://github.com/PacktPublishing/Accelerating-Angular-Development-with-Ivy/tree/main/projects/chapter1/globalization.

TypeScript is an integral part of Angular, but because Angular has its own compiler transformations that extend TypeScript's compilation steps, we are inevitably tied to the version of TypeScript that the Angular compiler supports. Fortunately, Angular is good at keeping up with recent versions of TypeScript. In this section, we are going to discuss some of the most noteworthy additions to the TypeScript language in the most recent versions supported by Angular Ivy.

TypeScript version 3.7 introduces a new operator for optional property access, optional element access, and optional calls. The optional chaining operator (?.) short circuits in the case of nullish values that is, null or undefined in which case it evaluates to undefined.

Optional chaining is great for working with composite objects or just plain old complex data structures such as large business documents transferred from a server, a dynamic runtime configuration, or telemetry from Internet of Things (IoT) devices.

The optional chaining operator allows us to be more concise in a single expression that attempts to access a hierarchy of properties that may or may not be available.

Say we are working on a document processing system that supports Universal Business Language (UBL) documents in JSON format. In our UBL invoice parser, we want to determine the UBL version that the document follows to be able to parse it according to a standard version. We fall back to UBL version 2.1 if it's left unspecified.

Without optional chaining, our code might look like this, given an invoice variable containing the invoice document:

const ublVersion =

(invoice.Invoice[0].UBLVersionID &&

invoice.Invoice[0].UBLVersionID[0] &&

invoice.Invoice[0].UBLVersionID[0].IdentifierContent) || '2.1';

For each optional property or array element in the invoice data structure, we must make a conditional check to break the circuit; otherwise, we will end up trying to access a property of an undefined value, which will result in a runtime error.

With the optional chaining operator, our statement is simplified to the following one:

const ublVersion =

invoice.Invoice[0].UBLVersionID?.[0]?.IdentifierContent || '2.1';

Now, we can see the structure of the document and identify every optional property or array element as they are succeeded by the optional chaining operator, ?..

The noise of conditional access is reduced to a bare minimum. At the same time, the risk of a mistake occurring is reduced as it is less code overall and there is no repeated code, meaning that we would only have to make a single change in our code if the shape of the data structure changed.

In the invoice document examples in the previous two code listings, we have seen the optional chaining operator being used for optional property and element access.

Important Note

Optional access using strings and symbols is also supported. Even optional access using computed property names is supported.

The last use case for this new operator is optional function or method calls. Let's go through an example.

Let's say we follow a classical API style of allowing our consumers to pass success and error callbacks. If the error callback is optional, we must check that it was passed before calling it; otherwise, we will get a runtime error.

In the catch clause of the following code, we can see a conditional call for the onError callback:

function parseDocument(

json: string,

onSuccess: (document: UBLDocument) => void,

onError?: (error: Error) => void

): void {

try {

const document = JSON.parse(json);

onSuccess(document);

} catch (error) {

if (onError) {

onError(error);

}

}

}

With the optional chaining operator, we can simplify the conditional function call as seen in the following code:

function parseDocument(

json: string,

onSuccess: (document: UBLDocument) => void,

onError?: (error: Error) => void

): void {

try {

const document = JSON.parse(json);

onSuccess(document);

} catch (error) {

onError?.(error);

}

}

Even though a function is not a member of an object, we can still use an optional call to invoke it conditionally. We put the optional chaining operator between the function name and the parentheses that wrap the arguments passed to it, as seen in the previous code.

Keep in mind that the optional chaining operator returns undefined when the conditional property it guards contains a nullish value. This means that an expression that involves optional chaining can only return