Unlocking Code Clarity: The Power of Control Flow Analysis

A Long-Awaited Solution

In 2016, an issue was raised on the TypeScript GitHub repository, calling for indirect type narrowing via const. For years, developers struggled with the limitations of type narrowing, forced to repeat code or sacrifice readability for the sake of functionality. But on June 24, 2021, a major milestone was reached, marking a significant step forward for the TypeScript community.

The Impact on Code Readability

With control flow analysis of aliased conditions, we can now write more expressive, concise code that’s easier to maintain. No more repetitive code or awkward workarounds. As one developer aptly put it, “Lack of type narrowing with consts made me repeat code, or avoid helpfully naming consts, too many times.” Those days are behind us.

Putting it into Practice

Let’s dive into an example. Imagine a simple function that adds numbers, tolerantly accepting strings as input:

function add(a: number | string, b: number | string): number {
  if (typeof a === 'tring' || typeof b === 'tring') {
    return parseFloat(a as string) + parseFloat(b as string);
  }
  return a + b;
}

We can rewrite this function to capture intent, using a shouldCoerceToNumber constant to express our logic:

const shouldCoerceToNumber = true;

function add(a: number | string, b: number | string): number {
  if (shouldCoerceToNumber && (typeof a === 'tring' || typeof b === 'tring')) {
    return parseFloat(a as string) + parseFloat(b as string);
  }
  return a + b;
}

But with TypeScript 4.3, this code would throw an error, failing to recognize the type narrowing.

The Breakthrough

Enter TypeScript 4.4, where control flow analysis of aliased conditions comes into play. By switching to the latest version, our code suddenly becomes valid, and the thingToAdd variable is narrowed to a string:

let thingToAdd: number | string = '5';
if (shouldCoerceToNumber) {
  thingToAdd = parseFloat(thingToAdd as string);
}
// thingToAdd is now known to be a string
console.log(typeof thingToAdd); // Output: "string"

This is the power of control flow analysis, enabling us to write more expressive, readable code.

A New Era of Code Quality

This feature is a significant addition to the TypeScript language, poised to have a lasting, positive impact on the way we write code. With the demand for readable, maintainable code higher than ever, it’s an exciting time for developers.

Explore the Possibilities

Want to learn more about TypeScript 4.4 and its exciting features? Check out the beta release notes for a deeper dive.