TypeScript Chronicles: Navigating the World of Typed JavaScript🚀
Tags: typescript, softwaredevelopment, javascript, webdev
Published: 2024-04-22 08:36:30

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


![tsc hello world code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgru1f3v6z8zlk057fql.png)

 _Step 4_ - Compile the ts file

```
tsc -b
```

it will generate a new index.js file


![js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpnh1ekfjseffyndiwl1.png)

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


![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmcx156k9xsq2x202pwh.png)

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](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)

**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](https://www.scaler.com/topics/typescript/tsconfig-json/)

**Interfaces**

you can assign types to objects using interfaces

![interface example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfo47631w8943ge7mm0g.png)

**Types**

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

![example of type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kg6tp8sqtm8qomvlnmk.png)

**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](https://www.typescriptlang.org/docs/)
[ts-cheatsheet](https://devhints.io/typescript)
[ts-tutorial](https://www.w3schools.com/typescript/)
[ts-beginners-guide](https://www.freecodecamp.org/news/learn-typescript-beginners-guide/)

Happy Coding!⭐