What is the difference between Javascript and Typescript?

by
Spread the love

In this article, we are going to know the difference between Javascript and Typescript. Javascript is a loosely typed scripting language. We usually don’t define the type of variables explicitly in Javascript code. This may result in unwanted errors which take time to fix if we don’t know where the error is coming from. Typescript is solving this issue and it is giving us the edge over Javascript. Let’s see how typescript is different from Javascript.

Difference Between Javascript and Typescript

Declaring Variable

In Javascript, we declare a variable like this

let name;

Now, this variable can hold anything from numbers to strings which may create unwanted errors if we use it in a project. So, if we declare the type of that variable then it would be easier for us to debug the errors before compiling.

So, in Typescript we declare variables like this

let name:string;

So, if we assign a number to the name variable, you will see this error in VS Code.

difference between javascript and typescript

By using typescript, we can prevent these types of errors during the declaration of variables.

Declaring Objects

In Javascript, we declare objects simply like this

const obj = { 
  name: ”Alex”, 
  age: 18 
}

 

It does work fine and if we include any other properties to this object, it will throw an error.

difference between typescript and javascript

However, to make it more structural and to extend its properties with other objects in the future, we can use the feature called interface.

We can declare an interface with properties like this

interface User {      
  name: string,     
  age: number 
}

 

If you notice, we have used capital letters as the first letter for the interface. This is a good practice that will help us differentiate between the variables and interfaces.

By using interfaces, we declare objects like this

interface User { 
  name: string, 
  age: number 
} 
const user:User = { 
  name: "Alex", 
  age: 18 
}

And we add any other property which is not exist in the interface, it will throw error like this.

difference between javascript and typescript
As we have classes in javascript, we can use the interfaces along with classes to make them more structural and better understanding when we read the code.
interface User { 
  name: string; 
  age: number; 
} 

class UserAccount { 
  name: string, 
  age: number,
  constructor(name:string, age:number) { 
    this.name= name; 
    this.age= age; 
  } 
} 
const user: User = new UserAccount("Alex", 18);

Composing Types

We can create custom types with multiple combinations of values in Typescript. That combination can be string or string, string or value, etc. This can be done in two popular ways.

1. Unions

As the name says, it combines two or more different values as types.

Suppose let’s if we want to create a boolean variable with types, we can declare it as

type Bool = true | false

Similarly, if we want to add custom types for example, let’s for modal, we want to add a state variable to it, we can create it using type.

type WindowStatus = “open” | “closed”;

we can combine text, numbers, or anything as a type

type value = string | number | string[]

But it is not advisable to do this, as the purpose of the typescript itself will get violated because of this.

2. Generics

By using Generics, we can provide variables to types. The best example would an Array. An array can contain anything. But with Generics, we can declare the type of variables inside an Array too.

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

Structural Type System

One of the core principles of Typescript is, it focuses on the shape of the values of an object. The type checking is done on the shape of the object. We can also call it as Duck Typing or Structural Typing.

For example, if we create an interface like below

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
const point = { x: 12, y: 26 };
logPoint(point);

it will give us the output as 12, 26 as it matches the structure.

If we change the structure like

const point3 = { x: 12, y: 26, z: 89 };
logPoint(point3);

it will return the output as 12,26 as the subset matches with the interface.

But if we modify the structure like below

const point3 = { x: 12, z: 89 };
logPoint(point3);

it will throws the error

difference between jav ascript and typescript

So, the code will pass if we have a matching subset in the object.

These are some of the basic differences between Javascript and Typescript which all the developers should be aware of.

Leave a Comment