Back to home

Typescript Vs. Javascript

Laurens Duin - June 2023

Javascript and TypeScript are two prominent programming languages widely used for web development. Even though Typescript is a superset of Javascript, the differences between them couldn't be bigger. While Javascript is a dynamically typed language, TypeScript introduces static typing to (in my opninion) enhance code quality and scalability.

Static typing

As stated, the main difference between Javascript and Typescript is their typing system. But what exactly does static typing mean. In short; when a variable is assigned a type e.g. string, number, string[] etc. this type is not allowed to be changed later on in the code. Allow me to clarify with an example.

In Javascript

					
let myNumber = 10;
console.log(myNumber); // Result: 10

myNumber = "Hello!";
console.log(myNumber); // Result: Hello!
					
				

In this example, the type our variable myNumber starts out as a number. However, because Javascript is dynamically typed, it allows us to change this data type to whatever we like, in this case a string.

In Typescript

In Typescript, this works a little differently. Since Typescript is statically typed, it means the data type of variables can't be changed after assignment. So the same code example from above, but in Typescript would result in the following TypeError.

					
let myNumber = 10;
console.log(myNumber); // Result: 10

myNumber = "Hello!";  // Error: Type 'string' is not assignable to type 'number'
console.log(myNumber);
					
				

Now depending on your tsconfig (Typescript config), your code could still be ran, since any valid Javascript is valid in Typescript. However, most often it's better to abide by the Typescript laws and change your code. A way to make the above code run is by giving our variable two possible types using a colon like so:

					
let myNumberOrString: number | string = 10;
console.log(myNumber); // Result: 10

myNumber = "Hello!";
console.log(myNumber); // Result: Hello!
					
				

Typescript interfaces

TypeScript interfaces are a fundamental feature that allows developers to define the structure and shape of objects. They describe the properties, their types, and whether they are required or optional. Interfaces enable type checking for larger datasets, ensuring that objects adhere to a specific structure and providing early detection of potential errors.

Use cases

In the simpler examples provided above, our Typescript doesn't really help us all that much. Where Typescript really becomes useful is when working on larger projects, especially ones with external data sources. To view some more advanced Typescript code, check out this project or take a look at my portfolio ;);

Function signatures

Finally, what I love about Typescript is how the code documents itself. What I mean by this is because of the strict type system, the code knows in advance what the paramaters, return types atc. are going to be. Provided you're using a code editor with Typescript intellisense, this documentation is shown on hover. For example, when hovering over a function call, a return value and the types of parameters will be specief.

TypeScript also supports optional and default parameters, which further enhance self-documentation. By marking certain parameters as optional or providing default values, the function signature communicates that those parameters are not required for every function call. Just like in Javascript, default paramaters can also be set, which effectively makes the parameter optional.

By utilizing these TypeScript features, functions become self-documented, providing clear guidelines on parameter types, return types, and optional/default behaviors. This enables better understanding, collaboration, and maintenance of codebases, as developers can rely on the self-documented functions to accurately represent their expected behavior.

To close off...

To full document all things great about Typescript, you could write a complete book. To keep things summarily though, I will leave it at this. If you're interested to learn more about Typescript, buy my course for only €700 (results not guaranteed).