What distinguishes JavaScript from TypeScript?

JavaScript is one of the most common programming languages, but it’s not suitable for every kind of application. We’ll tell you when you’re better off using TypeScript.

The Internet basically runs on JavaScript, HTML, and CSS. Unfortunately, JavaScript is not suitable for developing large applications. This is where TypeScript comes into play: the coding language is compatible with JavaScript and also enables the development of very large applications.

We have summarized the essential facts about JavaScript and TypeScript and tell you where the differences are.

What is JavaScript?
JavaScript was born as a programming language for the venerable Netscape Navigator. Brendan Eich created the prototype for the programming language in 1995 in a period of ten days. As Eich revealed in an interview with Infoworld’s US colleagues in 2008, JavaScript was first called “Mocha,” then “LiveScript,” and finally christened JavaScript in December 1995 after a licensing agreement between Netscape and Sun Microsystems. The nomenclature similarities between Java and JavaScript have led to misunderstandings and confusion many times in the past, although there are glaring differences between Java and JavaScript. JavaScript has evolved considerably over the years and is now supported by all modern web browsers.

The introduction of JavaScript for Netscape Navigator was followed relatively quickly by a variant for Netscape Enterprise Server and Microsoft IIS. About 13 years later, Ryan Dahl finally introduced Node.js, an open-source, cross-platform runtime environment for JavaScript that works independently of browser or server variant.

Coding with JavaScript
JavaScript is a programming language with many paradigms: It uses curly brackets and semicolons similar to the C language family. It has weak, dynamic typing and is either interpreted or compiled just-in-time. More generally, JavaScript is single-threaded though there is a Web Workers API that allows multithreading. In addition, there are ‘events’, ‘asynchronous function calls’, and ‘callbacks’.

JavaScript supports object-oriented software development with prototypes in contrast to the ‘class syntax’ used in C++, Java, and C#. However, this has also been on board since 2015 with the release of JavaScript ES6. In addition, JavaScript also supports functional programming including ‘closures’, ‘recursion’, and ‘lambdas’ (anonymous functions).

Before JavaScript ES6, there was no tail call optimization now this is possible when the ‘strict mode’ (‘use strict’) is activated. The implementation differs depending on the browser. The ‘strict mode’ changes the semantics of JavaScript and ensures that some ‘silent errors’ become ‘throw errors’.

The JavaScript ecosystem
There are numerous JavaScript APIs some are provided by browsers, and others are third-party interfaces. There are different APIs for clients, servers, desktops, and those that support several different environments. JavaScript browser interfaces include:

• Document Object Model (DOM)
• Browser Object Model (BOM)
• Geolocation
• Canvas (graphics)
• WebGL (GPU-accelerated graphics)
• HTMLMediaElement (audio and video)
• WebRTC (real-time communication)

Third-party APIs abound, from interfaces to complete applications like Google Maps. Others are utilities, for example, to make software development easier with JavaScript, HTML5, and CSS (jQuery). Application frameworks for special purposes are also available: Express, for example, enables the development of web and mobile application servers in Node.js.

There is a multitude of other JavaScript modules over 300,000 different ones in total. To cope with the sheer number, it is recommended to use a ‘package manager’ such as npm (standard for Node.js). An alternative to this is, for example, yarn, which was developed by Facebook. Other tools in a similar style include Bower, Ender, or jspm.

Webpack, on the other hand, bundles JavaScript modules into static browser assets, and Browserify allows software developers to write Node.js-style modules that are compiled for use in the browser. Grunt, on the other hand, is a file-oriented JavaScript ‘task runner’ as is gulp (which is also a ‘streaming build system’).

To ensure that the JavaScript code runs reliably without compilation, ‘linter’ is used. This term is based on the C programming languages lint tool once a standard tool for Unix. JavaScript ‘linters’ include:

• JSLint
• JSHint
• ESLint

These can be automated with the help of a ‘task runner’ or an IDE when changes are made to the program code.

Transpilers are used to translate other programming languages such as CoffeeScript or TypeScript into JavaScript or to simplify modern JavaScript code (for example ES2015) so that it runs in (almost) every browser. The most common transpiler for modern JavaScript is Babel.

What is TypeScript?
TypeScript represents a typed superclass of JavaScript that can be compiled into ‘plain’ JavaScript. The open-source TypeScript compiler can be installed as a Node.js package. The following development environments support TypeScript:

• Visual Studio 2017
• Visual Studio 2019
• Visual Studio Code
• WebStorm
• Sublime Text
• Atom
• Eclipse
• Emacs
• Vim

TypeScript adds optional types, classes, and modules to JavaScript and supports tools for JavaScript applications with a wide range of lines of code. Browser, host, or operating system do not matter. By using types, software developers have the ability to use highly-productive development tools and methods such as static checking and code refactoring when developing JavaScript applications. These ‘types’ are optional, but a few annotations can make a big difference when it comes to ‘static verification’ of the program code. In addition, ‘types’ can also be used to define interfaces between software components and gain insight into the behavior of existing JavaScript libraries.

To create the most robust software components possible, TypeScript supports the latest JavaScript features.

Software development with TypeScript
TypeScript accepts JavaScript but provides additional capabilities: ‘type annotations’ and ‘type checking’ regarding compile-time, classes, and modules. This is extremely useful if you want the software to run as reliably as possible. Simple JavaScript generates errors only at runtime and only when an error-prone path is reached. The tutorial “TypeScript in 5 minutes” explains the benefits, while “Migrating from JavaScript” provides detailed insight into how to upgrade an existing JavaScript project.

Other interesting and insightful insights into working with TypeScript are provided by long-time Microsoft developer Anders Hejlsberg:

https://sec.ch9.ms/ch9/4871/2ffba85e-32d6-4722-ad63-93baab074871/BRK2150_mid.mp4