🔧 TypeScript Chronicles: Navigating the World of Typed JavaScript🚀

In the dynamic landscape of web development, TypeScript is a trusty ally for developers. It adds some helpful features to JavaScript, making coding easier and less error-prone.

In this post, we'll take a closer look at Typescript and how it can make your coding life better.

Let's dive in!

Setting up TypeScript

Step 1 - Install TypeScript globally

npm install -g typescript

Step 2 - Initialize an empty node.js project with tsc

mkdir ts-app
cd ts-app
npm init -y
npx tsc --init

*All the above commands will initialize package.json and tsconfig.json files in your project

Step 3 - Now create a index.ts file in ts-app directory

Step 4 - Compile the ts file

tsc -b

it will generate a new index.js file

Notice, this is plain JavaScript code with no types

TypeScript vs. JavaScript: Bridging the Gap

TypeScript is a superset of JavaScript. It allows developers to declare types explicitly making it easy to catch error at compile time

While JavaScript is a powerful flexible language but loosely typed which can lead to unexpected errors, especially in larger projects.

let's try assigning x to a number:

let x: string = "Hello world!";
x = 1
console.log(x);

Try to compile the code again. And it will throw an error

This is the benefit of TypeScript. It adds a layer of safety by allowing you to specify the types of data your code expects.

To know more about the types you can go through the official docs of TypeScript ts docs

tsconfig file

tsconfig file has many options available. You can also change those to change the process of compilation

If you want to learn about the tsconfig file and its usability in compilation process in depth you can go through this article 👉 tsconfig-indepth

Interfaces

you can assign types to objects using interfaces

Types

type can be used to combine existing types or create complex types.
with type you can create union types and intersection types easily

Type vs Interface

If you want to create a new data type that represents complex types or a combination of existing types, 'type' may be more appropriate. If you're defining the structure of an object, interface is likely the better choice.

Sometimes it may come down to personal preference. Both type and interface are powerful features of TypeScript, so choose the one that best fits your needs and makes your code easier to understand.

Enums

You can define a set of constants using Enums

Generics

Generics in TypeScript also provides a way to create reusable components that can work with different data types.

They are very much useful in libraries and frameworks where the input and output data types may vary

Here are some useful resources for learning TypeScript

ts-docs
ts-cheatsheet
ts-tutorial
ts-beginners-guide

Happy Coding!⭐