TypeScript is a statically typed syntactic language extension of JavaScript, which offers classes, interfaces and modules for structuring larger source codes. Good reasons are needed to introduce new languages and technologies into existing environments and projects. This article will elaborate the use of the TypeScript language to determine which problems in web projects are solved by its use.

This is not another article about one of the many JavaScript frameworks to convince you to jump on another passing train. You don’t want to become another “fashion victim” with cost-intensive project maintenance cycles, so it is worth looking at JavaScript trends from a greater distance.

Projects and JavaScript

Some typical JavaScript problems in more complex projects are:

• Not strongly typed and type checks only at runtime
• No namespaces
• No uniform module system

The TypeScript language is an open source programming language that was introduced in October 2012 after two years of development. The language itself is developed and strongly maintained by Microsoft. A comprehensive roadmap with average language version updates every six months to provide fixes and refactoring make TypeScript suitable for larger enterprise environments. The development of TypeScript is based on ECMAScript and upcoming features. ECMAScript is a specification for scripting languages standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was developed for the standardization of JavaScript [1]. ECMAScript is constantly growing, and more functions are added. Thus, TypeScript grows to implement the current patterns and elements of JavaScript into the static typed model-world of TypeScript to provide a way to detect bugs and enforce correctness in the source code while writing.

TypeScript as A Pragmatic Extension of JavaScript

New programming languages often use an existing infrastructure. For example, Scala, Groovy and Kotlin rely on Java and the JVM. Even low-level languages like Rust, Julia or Clang rely on the LLVM backend. At the same time, these languages try to emancipate themselves from their host environment: New libraries, often incompatible with the existing infrastructure, are introduced. In addition, dogmatic decisions often determine development, although the choice of a programming language can be considered pragmatic.

TypeScript deliberately takes a different path here. Unlike the above languages, TypeScript does not even have a standard library. TypeScript programmers use exactly the same libraries as JavaScript programmers. The goal of the TypeScript inventors has always been 100% compatibility with JavaScript. Libraries developed with TypeScript should always be able to be used with JavaScript.

Conversely, this means valid JavaScript code is always valid TypeScript code. The language extends JavaScript by an optional static typing at compile time. But if TypeScript is just a strict superset of JavaScript, then why should I use it?

The following features of TypeScript are not intended to be a copy of the TypeScript specification. It should rather show that the features serve to avoid the above-mentioned JavaScript problems elegantly on the one hand, and on the other hand to ensure full compatibility to JavaScript.

Discover Code Issues Early

TypeScript is categorized as a so-called ‘strongly-typed’ programming language, and this aspect has two major advantages in contrast to JavaScript (‘weakly-typed’). First, software developers can detect errors while writing the source code. Running the application to detect whether correct data structures have been used is no longer necessary. Instead, developers know at compile-time if correct data structures are used. On the other hand, strongly-typed programming languages provide code completion features of Integrated Development Environments (IDE). Both features greatly increase the productivity of software developers and reduce the susceptibility of source code to errors. Through improved feedback loops, these features of TypeScript will lead directly to shorter development cycles.

Structure Objects

Namespaces in TypeScript provide a way to logically group related source code. The names of the objects are arranged in a kind of tree structure and uniquely addressed by corresponding path names (in contrast to JavaScript, where objects are included in a global namespace). As soon as several JavaScript source code files are integrated into the project, there is a risk that objects with the same name are overwritten or created incorrectly in JavaScript. JavaScript uses the term “global namespace pollution”. Especially in large enterprise solutions, namespaces prevent this phenomenon from occurring.

Component Reusability

Modules in TypeScript were previously referred to as external modules. With TypeScript version 1.5, the term changed from external modules to (global) modules. TypeScript supports the following (global) module systems: CommonJS, AMD, SystemJS, Universal Module Definition and the standard ECMAScript 2015 (ES6).

TypeScript modules provide the ability to group related logical operations, encapsulate them, structure the source code, and generally avoid contamination of the global namespace. Modules can provide functions that are only visible within the module, and they can provide functions that are visible from the outside via the export keyword. Modules can be consumed by the keyword “import” in the corresponding source files.

Summary

Since TypeScript is a superset of the JavaScript language, any valid JavaScript program is also a syntactically valid TypeScript program. Thus, we can write regular JavaScript in all TypeScript files, which is then compiled unchanged to JavaScript by default.

Besides the above-mentioned advantages, for large projects, this offers the advantage that existing JavaScript source code can be reused without problems and can be migrated bit by bit into the TypeScript syntax, which leads to an improved and typified structure. This makes the progressive rewriting of existing JavaScript projects very easy since with this technique all existing JavaScript files can be seamlessly rewritten without changing existing behaviour or even having to rewrite his project using a “big bang”.

[1] https://en.wikipedia.org/wiki/ECMAScript