{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/typescript-4-4-more-readable-code",
  "description": "TypeScript 4.4 introduces \"Control Flow Analysis of Aliased Conditions\" which improves code readability by more expressive and less repetitive code.",
  "path": "/posts/typescript-4-4-more-readable-code",
  "publishedAt": "2021-08-14T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "typescript"
  ],
  "textContent": "An exciting feature is shipping with TypeScript 4.4. It has the name \"Control Flow Analysis of Aliased Conditions\" which is quite a mouthful. This post unpacks what this feature is, and demonstrates the contribution it makes to improving the readability of code.\n\n\n\nUpdated 30th September 2021\n\nThis blog evolved to become a talk:\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/LxZx3ycrxI0\" title=\"YouTube video player\" frameBorder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen></iframe>\n\n\n\nIndirect type narrowing via const\n\nOn June 24th 2021, an issue on the TypeScript GitHub repository with the title \"Indirect type narrowing via const\" was closed by Anders Hejlsberg. The issue had been open since 2016 and it was closed as it was covered by a pull request addressing control flow analysis of aliased conditional expressions and discriminants.\n\nIt's fair to say that the TypeScript community was very excited about this, both judging from reactions on the issue:\n\n[](https://github.com/microsoft/TypeScript/issues/12184#issuecomment-867928408)\n\nAnd also the general delight on Twitter:\n\n[](https://www.twitter.com/johnny_reilly/status/1408162514504933378)\n\nWhat Zeh said is a great explanation of the significance of this feature:\n\n> Lack of type narrowing with consts made me repeat code, or avoid helpfully namef consts, too many times\n\nWith this feature we're going to have the possibility of more readable code, and less repetition. That's amazing!\n\nThe code we would like to write\n\nRather than starting with an explanation of what this new language feature is, let's instead start from the position of writing some code and seeing what's possible with TypeScript 4.4 that we couldn't tackle previously.\n\nHere's a simple function that adds all the parameters it receives and returns the total. It's a tolerant function and will allow people to supply numbers in the form of strings as well; so it would successfully process '2' as it would 2. This is, of course, a slightly contrived example, but should be useful for demonstrating the new feature.\n\nTry it out in the TypeScript playground.\n\nIf we look at this function, whilst it works, it's not super expressive. The typeof thingToAdd === 'string' performs two purposes:\n\n1. It narrows the type from string | number to string\n2. It branches the logic, such that the string can be coerced into a number and added to the total.\n\nYou can infer this from reading the code. However, what if we were to re-write it to capture intent? Let's try creating a shouldCoerceToNumber constant which expresses the action we need to take:\n\nTry it out in the TypeScript playground.\n\nThis is valid code; however TypeScript 4.3 is choking with an error:\n\nThe error being surfaced is:\n\n> Operator '+=' cannot be applied to types 'number' and 'string | number'.(2365)\n\nWhat's happening here, is TypeScript _does not remember_ that shouldCoerceToNumber represents a type narrowing of thingToAdd from string | number to string. So the type of thingToAdd remains unchanged from string | number when we write code that depends upon it.\n\nThis has terrible consequences. It means we can't write this more expressive code that we're interested in, and would be better for maintainers of our codebase. And this is what TypeScript 4.4, with our new feature, unlocks. Let's change the playground to use TypeScript 4.4 instead:\n\nTry it out in the TypeScript playground.\n\nDelightfully, we no longer have errors now we've made the switch. And as the screenshot shows, the thingToAdd variable has been narrowed to a string. This is because Control Flow Analysis of Aliased Conditions is now in play.\n\nSo we're now writing more expressive code, and TypeScript is willing us on our way.\n\nRead more\n\nThis feature is a tremendous addition to the TypeScript language. It should have a significant long-term positive impact on how people write code with TypeScript.\n\nTo read more, do check out the excellent TypeScript 4.4 beta release notes. There's also some other exciting feature shipping with this release as well. Thanks very much to the TypeScript team for once again improving the language, and making a real contribution to people being able to write readable code.\n\nThis post was originally published on LogRocket.\n\n<head>\n    <link rel=\"canonical\" href=\"https://blog.logrocket.com/typescript-4-4-and-more-readable-code/\" />\n</head>",
  "title": "TypeScript 4.4 and more readable code"
}