TypeScript 3.7 features you absolutely should use

If I have to choose the most useful features new to TypeScript 3.7, these two are on the very top of the list.

Photo by Hannes Wolf on Unsplash

Optional Chaining

All of us JavaScript developers at some points of our career will unfortunately encounter this infamous error:

“Uncaught TypeError: Cannot read property … of undefined”

This is the equivalent to the “billion dollar mistake” — NPE (Null Pointer Exceptions) in the JavaScript land. And it is really easy to run into this kind of bugs.

const data = fetchAccountPerformance();
doSomethingWith(data.accounts.performance);

…but “data.accounts” can be “undefined”. And accessing “performance” from “data.accounts” will likely cause the above error.

To avoid this error, we might have to write some guarding code like this:

if (
  data && 
  data.accounts && 
  data.accounts.performance)
{
  doSomethingWith(data.accounts.performance);
}

Yes, very wordy.

Now with TypeScript 3.7, you can do this:

if (data?.accounts?.performance) {
  doSomethingWith(data.accounts.performance);
}

Much more concise.

“a?.b” is equivalent to:

(a === null || a === undefined) ?
  undefined : 
  a.b;

So “data?.accounts?.performance” is equivalent to:

(data === null || data === undefined) ?
  undefined :
  (data.accounts === null || data.accounts === undefined) ? 
    undefined : 
    data.accounts.performance;

However, be aware that “a && b” and “a?.b” are not necessarily 1-to-1 exchangeable. Here is an example:

const a = "";
console.log(a && a.length); // ""
console.log(a?.length); // 0

In the case of “a && a.length”, a.length will not be evaluated because “a” is an empty string, thus, falsy. The “&&” operator then skipped whatever on its right side, and returned the falsy value — an empty string.

However, in the case of “a?.length”, “a” is falsy but not null nor undefined. So “.length” will still be evaluated, and return 0.

Nullish Coalescing

We often need to provide a default value if a value is unavailable.

const name = person.name || "David";

If person.name is falsy (e.g., null, undefined, or “”), “David” will be assigned to variable name instead.

This all works well, but in some situations things can get tricky:

const amount = position.numberOfShares || 100;

The intention is to assign 100 to variable amount if position.numberOfShares is unavailable. But what if the numberOfShares is really 0?

0 is falsy, the “||” operator will then evaluate the right side, and return 100. Even if 0 is a legit value, it will still be overridden by 100. This is not what we wanted.

With TypeScript 3.7, you can now do this:

const amount = position.numberOfShares ?? 100;

100 will be used only when numberOfShares is null or undefined. The above code is equivalent to:

const amount = 
  (position.numberOfShares === null ||
  position.numberOfShares === undefined) ?
    100 :
    position.numberOfShares;

Conclusion

Optional Chaining and Nullish Coalescing are two features introduced by TypeScript 3.7. I found them very useful. For a full list of v3.7 features, see this.