TypeScript vs JavaScript: What’s the Difference?

No one likes static web pages with zero dynamic elements. Responsiveness along with smooth and flawless performance are characteristics that distinguish a quality web product.

For years, JavaScript was the main tool developers used to turn boring, static web pages into vivid, dynamic products that were pleasant to look at and comfortable to work with. Today, this language has dozens of alternatives, and one of the most famous is TypeScript.

In this article, we compare TypeScript vs JavaScript, highlight the main features of both languages, outline the key differences between them, and determine when and why TypeScript can be used instead of JavaScript. We also provide a practical comparison of TypeScript vs JavaScript performance so you can see how each of these languages handles itself when given similar tasks.

What is JavaScript?

JavaScript is an object-oriented language meant to make web pages dynamic and responsive. It’s also one of the most popular programming languages for web development.

JavaScript belongs to the family of languages that implement the ECMA Script (ES) standard. Currently, the two most widely applied standards are ES5 and ES6. In the practical part of this article, we’ll be working with the ES5 standard.

JavaScript allows for developing cross-platform solutions and supports interfaces, classes, and modules. This language was originally designed for small applications with several hundred lines of code and doesn’t perform well in large, complex projects.

Scripts — code written in JavaScript — are executed automatically while a web page is loading.

This scripting language has several useful features, including the ability to:

• modify HTML. You can use JavaScript to add, delete, and change markup on the fly. This is especially helpful when you need to quickly display or hide content.
• respond to user actions. JavaScript lets you manage the way a web page reacts to user interactions such as mouse clicks, pointer movements, and data entry.
• facilitate client–server interactions. You can send requests from the client (a web browser) to the target server and validate user input before sending data to the server.
• support cookies and localStorage. JavaScript allows you to work with cookies and localStorage. Cookies are small pieces of data sent by the server and stored on an end user’s machine, while localStorage stores the client’s data in a web browser.

Developers can use JavaScript in HTML files by either creating a separate JavaScript file and calling it within a script element or by embedding JavaScript code directly in the HTML code.

What’s so different about TypeScript?

While TypeScript can be seen as an independent object-oriented language, in practice, it’s more of a superset of JavaScript. Launched by Microsoft in 2012, this language is presented as a web application development tool that extends JavaScript’s capabilities. TypeScript can run on Node.js or in any browser that supports ES3 or higher.

What is TypeScript used for? TypeScript is a strongly typed language that supports classes, interfaces, and optional static typing. It implements many object-oriented programming concepts like abstract classes, inheritance, and polymorphism, and it allows developers to build more complex and high-quality solutions than they can using plain JavaScript. The syntax of TypeScript is quite similar to that of C-like languages (С++, Java, C#), so it’s easy for C developers to work with TypeScript.

At the same time, TypeScript can’t run in a browser right away and needs to be compiled into a JavaScript file first. But in contrast to JavaScript, you can freely choose which standard to compile to.

Key TypeScript features include:

• portability. TypeScript can run on the same environments as JavaScript, including in browsers and on operating systems.
• type checking. TypeScript allows for static type checking during compilation, so locating code errors becomes much easier.
• transpiler. TypeScript has a transpiler: a source-to-source compiler that converts TypeScript code into JavaScript code and allows for early detection of code errors.

It’s also noteworthy that frontend frameworks like Angular have out-of-the-box support for TypeScript. Other frameworks, including Vue and Knockout, support both JavaScript and TypeScript but require type definitions. Also, keep in mind that you may have to stick with JavaScript if the frameworks used in your project don’t support TypeScript.

Now that we’ve outlined the basic characteristics of these two languages, let’s look closely at the most noticeable differences between TypeScript and JavaScript.

Summarizing the key differences between JavaScript and TypeScript

Let’s compare these two languages based on the following set of parameters:

Table 1: JavaScript vs TypeScript comparison

As you can see, these languages have several significant differences. Let’s continue comparing JavaScript vs TypeScript and see how they perform in real-life tasks.

TypeScript or JavaScript: A practical comparison

Which language is better: TypeScript or JavaScript?

In this section, we compare JavaScript ES5 to TypeScript. To outline the main practical differences between these two languages, we’ll focus on the following aspects:

• Type definition
• Encapsulation
• Inheritance
• Polymorphism

Let’s start with exploring how the presence or absence of type definition affects the quality of code.

Interpretation vs compilation

As we said earlier, JavaScript is an interpreted language, which makes it harder to detect errors during coding. TypeScript, in turn, is a strongly typed language and allows for locating and fixing code errors before or during compile time.

Let’s take a look at a small piece of JavaScript code:

var myFunc = function(userObj){
    console.log(userObj.FirstName); // display first name
}
 
var user = {
    FirstName: 'Alex'
};
myFunc(user); // FirstName is displayed
 
var stringName = 'Alex';
myFunc(stringName); // undefined is displayed

The myFunc function is supposed to pass the name of a user to the console, and we expect to receive the object with the FirstName property as a parameter.

When we call the myFunc function using the user variable, everything seems to be fine, as the received object matches the structure that the function expects to receive. However, when we try to call this function using the stringName variable, the console displays the response “undefined,” since the string doesn’t have the FirstName property. This happens because JavaScript is executed on the fly, so we can only catch such errors during runtime. As a result, as the code base grows, there will be more and more bugs that could have been fixed at the early stages of development.

Now, let’s see what will happen if we implement the same example in TypeScript:

class User {
    FirstName: string
    constructor (fName: string) {
         this.FirstName = fName;
     }
}
 
// expecting a variable of type User
 
var myFunc = function(userObj: User) {        console.log(userObj.FirstName);
}
 
var user = new User('Alex');
myFunc(user); // FirstName is displayed
 
var stringName = 'Alex';
myFunc(stringName); // compilation error

As you can see, we receive an error at the compilation stage. This happens because in TypeScript, we can only pass the type of a parameter that a particular function expects to receive. As a result, we can detect and fix code errors during compilation, thus spending less time fixing bugs in the future.

Encapsulation

Let’s first take a look at an example of encapsulation in JavaScript:

function User(fname, age) {
    this.FirstName = fname;
    var _age = age; // this variable is not assigned to the scope
    this.GetAge = function(){ return _age }; // custom method to get _age
}
 
var u = new User('Alex', 25);
u.FirstName; // 'Alex'
u._age; // undefined
u.GetAge(); // 25

In this example, we directly closed access to the _age variable and, using the GetAge function, made it read only.

Now, let’s look at the same example in TypeScript:

class User{
    public FirstName: string
    private Age: number
    constructor(fname: string, age: number) {
        this.FirstName = fname;
        this.Age = age;
     }
 
     public GetAge(): number {
         return this.Age;
     }
}
 
var u = new User('Alex', 25);
u.FirstName; // Alex
u.Age; // compilation error
u.GetAge(); // 25

As you can see, when trying to compile this code in TypeScript, we get an error because we’re trying to call an unavailable property.

Inheritance

Next, we’ll compare examples of inheritance in JavaScript and Typescript. Let’s start with JavaScript.

To implement inheritance in JavaScript, we’ll use the prototyping mechanism:

var Shape = function Shape(name) {
    this.Name = name;
}
 
Shape.prototype = {
    Name: null,
    Print: function() {
        console.log("I'm an abstract shape with Name: " + this.Name)
    }
}
 
Shape.prototype.constructor = Shape;
 
var Circle = function Circle(name, radius) {
Shape.call(this, name);
this.Radius = radius;
}
 
Circle.prototype = Object.create(Shape.prototype, {
    Radius: {    
        value: null,
        enumerable: true,
        configurable: true,
        writable: true
    },
    Print: {
        value: function() {
            console.log("I'm a circle with Name: " + this.Name + " and Radius: " + this.Radius)
        },
         
        enumerable: true,
        configurable: true,
        writable: true
    }
})
 
Circle.prototype.constructor = Circle
 
 
var s = new Shape("ShapeName");
s.Print(); // I'm an abstract shape with Name: ShapeName
 
var c = new Circle("CircleName", 25);
c.Print(); // I'm a circle with Name: CircleName and Radius: 25

Writing all this code took a lot of effort, and the whole process turned out to be quite complex. But the biggest concern here is that the more code we need to write, the higher the chance of introducing new bugs.

Now, let’s see how the same example would look when implemented in TypeScript:

class Shape {
    Name: string
    constructor(name) {
        this.Name = name;
     }
 
 
    Print(): void {
       console.log("I'm an abstract shape with Name: " +   this.Name)
    }
}
 
class Circle extends Shape{
    Radius: number
    constructor(name, radius){
        super(name);
        this.Radius = radius;
    }
 
    Print(): void {
        console.log("I'm a circle with Name: " + this.Name + " and Radius: " + this.Radius)
    }
}
 
var s = new Shape("ShapeName");
s.Print(); // I'm an abstract shape with Name: ShapeName
 
var c = new Circle("CircleName", 25);
c.Print(); // I'm a circle with Name: CircleName and Radius: 25

As you can see, this piece of code is considerably shorter. Plus, in contrast to writing code in JavaScript, with TypeScript, we can be sure that our code contains no errors due to support for static typing.

Conclusion

TypeScript and JavaScript are two popular languages for writing web applications. JavaScript performs at its best when applied to projects with relatively small volumes of code. TypeScript, which is a superset of JavaScript, can be efficiently used for large projects with lots of complex code.

TypeScript is a strongly typed language that provides developers with numerous benefits. Writing in TypeScript requires less code compared to JavaScript to achieve the same functionality, and its syntax will be familiar to those working with C languages. TypeScript allows you to detect code errors during compile time, thus saving you both time and money on late bug fixes.

At Apriorit, we have an experienced team of web developers who build efficient, one-of-a-kind web applications and cloud solutions. Contact us to turn your challenging ideas into successful projects.