Difference between JavaScript and TypeScript

JavaScript

JavaScript is the most popular programming language of HTML and the Web. JavaScript is an object-based scripting language which is lightweight and cross-platform. It is used to create client-side dynamic pages. The programs in JavaScript language are called scripts. The scripts are written in HTML pages and executed automatically as the page loads. It is provided and executed as plain text and does not need special preparation or compilation to run.

History of JavaScript

Netscape Communications Corporation programmer Brendan Each developed JavaScript. It was introduced in September 1995, which was initially called Mocha. However, after gaining popularity as the best scripting tool, it was renamed as JavaScript to reflect Netscape’s support of Java within its browser. In November 1996, Netscape submitted JavaScript to ECMA (European Computer Manufacturers Association). The current version of JavaScript is ECMAScript 2018, which was released in June 2018.

TypeScript

TypeScript is an open-source pure object-oriented programming language. It is a strongly typed superset of JavaScript which compiles to plain JavaScript. TypeScript is developed and maintained by Microsoft under the Apache 2 license. It is not directly run on the browser. It needs a compiler to compile and generate in JavaScript file. TypeScript source file is in “.ts” extension. We can use any valid “.js” file by renaming it to “.ts” file. TypeScript is the ES6 version of JavaScript with some additional features.

History of TypeScript

Anders Hejlsberg developed TypeScript. It was first introduced for the public in the month of 1st October 2012. After two years of internal development at Microsoft, the new version of TypeScript 0.9 was released in 2013. The current version of TypeScript is TypeScript 3.4.5 which was released on 24 April 2019.

Advantage of TypeScript over JavaScript

• TypeScript always highlights errors at compilation time during the time of development, whereas JavaScript points out errors at the runtime.
• TypeScript supports strongly typed or static typing, whereas this is not in JavaScript.
• TypeScript runs on any browser or JavaScript engine.
• Great tooling supports with IntelliSense which provides active hints as the code is added.
• It has a namespace concept by defining a module.

Disadvantage of TypeScript over JavaScript

• TypeScript takes a long time to compile the code.
• TypeScript does not support abstract classes.
• If we run the TypeScript application in the browser, a compilation step is required to transform TypeScript into JavaScript.

TypeScript Vs. JavaScript

SN	JavaScript	TypeScript
1.	It doesn’t support strongly typed or static typing.	It supports strongly typed or static typing feature.
2.	Netscape developed it in 1995.	Anders Hejlsberg developed it in 2012.
3.	JavaScript source file is in “.js” extension.	TypeScript source file is in “.ts” extension.
4.	It is directly run on the browser.	It is not directly run on the browser.
5.	It is just a scripting language.	It supports object-oriented programming concept like classes, interfaces, inheritance, generics, etc.
6.	It doesn’t support optional parameters.	It supports optional parameters.
7.	It is interpreted language that’s why it highlighted the errors at runtime.	It compiles the code and highlighted errors during the development time.
8.	JavaScript doesn’t support modules.	TypeScript gives support for modules.
9.	In this, number, string are the objects.	In this, number, string are the interface.
10.	JavaScript doesn’t support generics.	TypeScript supports generics.
11.	Example:<script> function addNumbers(a, b) { return a + b; } var sum = addNumbers(15, 25); document.write(‘Sum of the numbers is: ‘ + sum); </script>	Example:function addNumbers(a, b) { return a + b; } var sum = addNumbers(15, 25); console.log(‘Sum of the numbers is: ‘ + sum);

TypeScript vs. JavaScript Examples

Let’s start with a valid JavaScript snippet:

let var1 = "Hello";
var1 = 10;
console.log(var1); 

Here, var1 starts out as a string, then becomes a number.

Since JavaScript is only loosely typed, we can redefine var1 as a variable of any type—from a string to a function—at any time.

Executing this code outputs 10.

Now, let’s change this code into TypeScript:

let var1: string = "Hello";
var1 = 10;
console.log(var1);

In this case, we declare var1 to be a string. We then try to assign a number to it, which isn’t allowed by TypeScript’s strict type system. Transpiling results in an error:

TSError: ⨯ Unable to compile TypeScript:
src/snippet1.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.

2 var1 = 10;

If we were to instruct the transpiler to treat the original JavaScript snippet as if it were TypeScript, the transpiler would automatically infer that var1 should be a string | number. This is a TypeScript union type, which allows us to assign var1 a string or a number at any time. Having resolved the type conflict, our TypeScript code would transpile successfully. Executing it would produce the same result as the JavaScript example.

Type System Works Only Until Transpile Time

TypeScript’s JavaScript output doesn’t contain type information, so it won’t perform type checks and, therefore, type safety can break at runtime. For example, suppose a function is defined to always return an object. If null is returned from its use within a .js file, a runtime error will occur.

Type information-dependent features (e.g., private fields, interfaces, or generics) add value to any project but are scraped off while transpiling. For example, private class members would no longer be private after transpilation. To be clear, runtime issues of this nature are not unique to TypeScript, and you can expect to encounter the same difficulties with JavaScript too.

Combining TypeScript and JavaScript

Despite TypeScript’s many benefits, sometimes we can’t justify converting an entire JavaScript project all at once. Fortunately, we can specify to the TypeScript transpiler—on a file-by-file basis—what to interpret as plain JavaScript. In fact, this hybrid approach can help to mitigate individual challenges as they arise over the course of a project’s life cycle.

We may prefer to leave JavaScript unchanged if the code:

• Was written by a former colleague and would require significant reverse-engineering efforts to convert to TypeScript.
• Uses technique(s) not allowed in TypeScript (e.g., adds a property after object instantiation) and would require refactoring to adhere to TypeScript rules.
• Belongs to another team that continues to use JavaScript.

In such cases, a declaration file (.d.ts file, sometimes called the definition file or typings file) gives TypeScript enough type data to enable IDE suggestions while leaving JavaScript code as is.

Many JavaScript libraries (e.g., Lodash, Jest, and React) provide TypeScript typings files in separate type packages, while others (e.g., Moment.js, Axios, and Luxon) integrate typings files into the main package.

read more about: TypeScript and JavaScript

more info: xpertlab