Write clearer code with TypeScript 4.0

Write clearer code with TypeScript 4.0

We probably shouldn’t be surprised that JavaScript has become one of the most popular programming languages in use today. It’s powerful, flexible, and easy to learn. But it still has issues, especially around how it handles types. It’s difficult to write large, complex applications in JavaScript because it’s hard to validate code before it runs. It’s tough to use in-line code analysis tools when using dynamic typing, reducing the effectiveness of tools such as Visual Studio’s IntelliSense.

Without static types, it’s hard to recommend JavaScript as a language for building large-scale applications. You certainly wouldn’t want to use it for applications such as Office or to build complex programmers’ editors. But JavaScript is an extensible language with runtimes for many different platforms, so it’s an attractive target for developers who don’t want to spend time writing different versions of their code for different environments. One option is technologies such as transpilers, which make it possible to compile code from other languages to JavaScript.

TypeScript: a strongly typed alternative to JavaScript

That’s the approach taken by Microsoft’s TypeScript language. Developed as a strongly typed superset of JavaScript, it’s designed to build on JavaScript to deliver a language that could be used for those large-scale development projects, helping manage the many hundreds and thousands of variables in your code and allowing in-line code analysis and debugging tools to help you write code correctly. You can add existing JavaScript code to a TypeScript application and it’ll run without needing any changes, making it relatively easy to start the process of converting dynamic typed code to TypeScript’s strict static typing.

Nearly eight years ago Microsoft released the first public build, 0.8.1, of TypeScript, in November 2012. Since then it’s been used on many large-scale Web applications and in many apps running on the Electron cross-platform runtime. You’ve probably used one without realizing it, perhaps reading your e-mail on Outlook.com or working on some code in Visual Studio Code. One of Microsoft’s biggest open source projects, it’s led the way for the open sourcing of .NET and much of the current open design and development model used across the company. Now the latest version has been released, Version 4.0, with a significant number of improvements and new features.

Getting started with TypeScript 4.0

Microsoft’s philosophy with TypeScript has been to avoid breaking changes, so existing TypeScript applications can be transpiled with the new TypeScript tooling. All you need to do is upgrade using NuGet or npm to use it in any development environment that supports TypeScript. Microsoft offers deep integration in Visual Studio with a TypeScript 4.0 plug-in in the Visual Studio Marketplace that adds support for in-editor debugging and a command line compiler.

If you’re using Visual Studio Code you automatically get support for the newest release in an upcoming update, as it ships with a recent stable version. If you want the new TypeScript right away, you can either download an Insider Build of Visual Studio Code, switch to the nightly build of TypeScript from the Code command line, or add an updated TypeScript version number to your code and switch the workspace version in use.

This last approach might be your best option, as it lets you keep TypeScript 4.0 code separate from other versions you might need to maintain before upgrading. You may need to download an updated language server definition using npm and update your TypeScript user settings if you intend to make TypeScript 4.0 your default.

Although static typing remains the key innovation in TypeScript, the development team has gone a lot further, using the language to pioneer new features as well as supporting ECMAScript features that may not have been added to JavaScript yet. As a result, TypeScript 4.0 is a big release, adding support for new data types, with a focus on tuples.

Working with types in arrays and tuples

One problem in earlier releases of TypeScript was working with array concatenations. A simple JavaScript function to concatenate two arrays would result in a lot of overloads, making code hard to read and debug. If you wanted to ensure types were correct you needed to do a lot of work. TypeScript 4.0 makes things a lot easier, as you no longer have to specify the types for each element in an array or tuple; instead, you can use generics to define functions.

This allows you to operate on the underlying arrays or tuples without knowing their types. The resulting code is easier to read and is still strictly typed under the hood, using the types you’ve used to define your variables or arrays. Functions written this way become more portable, as they don’t have to be customized for each specific operation. Other new tuple features help support inferring types that might not be fully defined, again making it easier to write portable functions that work on any array or tuple.

Another new feature helps improve code readability, as TypeScript 4.0 adds support for labeling tuple elements. You do need to label all the elements, and if they’re not labeled you will get an error. Labeled elements don’t affect the underlying code TypeScript produces, but they do make it easier to document and to use in-editor tools to help find errors. They help you understand what’s happening in arrays, making a set of labeled tuples look a lot more like a familiar parameter list.

The changes to how TypeScript manages tuples are probably the most important, as working with arrays is a common requirement in large-scale enterprise applications. They’re not the only changes. Others improve how TypeScript infers types in classes or add new ECMAScript features to the language, supporting new assignment operators to simplify your code.

Better code from better editor features

Improved TypeScript doesn’t only improve your code, it also improves JavaScript support in the Visual Studio family of IDEs, with new tools for refactoring your code in both languages. Integration with JSDoc gives your editors tools when code is deprecated, showing what needs to be changed to be ready for future releases. Other changes make parsing code in language servers more efficient, making editors more responsive by giving you what the TypeScript team calls a “partial semantic experience,” allowing you to start coding while all your files are parsed and dependencies are listed. By initially only parsing your currently loaded files, you can start work within seconds while the rest of your project is analyzed in the background.

There are some breaking changes in TypeScript 4.0: For example, you can no longer use properties to override accessors in your base classes. In previous releases you’d only get an error if you did this under specific circumstances. Now TypeScript treats this as an error in all cases. Other changes include requiring optional operands for the delete operator and deprecating TypeScript’s older node factory functions in favor of a new API. These should only require minor changes to your code, clarifying a handful of inconsistencies and helping reduce the risk of errors and bugs.

There’s a lot to like in TypeScript 4.0. It’s an easy upgrade from previous releases, and as it compiles to JavaScript you don’t need to make changes to your runtime targets. All you need is a new set of language servers for your development environment and a new compiler. Improved support for complex arrays should allow you to build applications that work well with mixed data arrays, avoiding overloads and making your code a lot easier to read and understand.

Having static types in tuples and arrays should reduce errors, but the real benefit of TypeScript 4.0 comes from simplifying what would have been complex code into a structure that makes it easier to find and fix errors.