Exploring the concept of the Typescript - Day 2 Of #100DaysOfFullStackChallnege
Tags: typescript, webdev, programming, nextjs
Published: 2024-07-06 17:58:30

So, Welcome back everyone 👋
I'm Aditya, and I'm starting a new series for the next 100 days to become an excellent Full-stack Developer.
Today is the Day 2 of my journey. Today I learned about typescript. 
Introduction to TypeScript -> TypeScript is nothing but JavaScript with the `Types`. Let's see what I mean by types. Here is a short example to start with.

**1. Types In Ts**

- 1. String type in ts
Let's define string in javascript 

```
let language = "typescript";
```
and if we console this it will give output 

```
typescript
```
here typescript gives you an extra edge in that you can define type something like

```
let language:string = "typescript";
```
so the `language` variable only stores the string data type into it. 
It helps to reduce runtime errors and make code more readable.

It is okay that you can write 

```
let language = 10;
```
so JavaScript gives you an output 

```
10
```

but in typescript, if you mention the variable type in this case it is `string` you cannot assign different data type values. You have to assign a string in this case. 

here is another example that shows you how typescripts work 
If you create a simple object in javascript,

```
const user = {
    name:"aditya",
    age:21,
}
```
now if you access the property that does not exist in the `user` object javascript will return you an `undefined` 

```
//js code
console.log(user.location) //undefined
```
but in the case of typescripts, you get an error

`Property 'location' does not exist on type '{ name: string; age: number; }'.`

- 2. number type in ts.

same as string, you can declare the variable that can only store the number and not other data types than numbers. e.g 

```
const age:number = 20;

```
in the variable age, you can't store the data type other than a number.

you can use all javascript primitives data types like this. 

Let's move to another important concept of typescript that I learned today
**3. Array**
Let's talk about how to declare an array in ts. 

here is how do we declare an array in js

```
const arr= [1,,2,3,4,5,"aditya"];
```
you can store any data inside the array in js but when it comes to typescript it restricts to store of the data other than you write with `:` notation. 

For example 

```
const arr:number[]= [1,,2,3,4,5,"aditya"];
console.log(arr);
```

I write string inside number array so typescript is telling me that `Type 'string' is not assignable to type 'number'`. You have to write numbers and If you want to store data of different data types like numbers and string what you can do is you can use something called `Union Type`. In this type, you can two or more data types by separating them using the pipe symbol `|`.
For the above example, we can write typescript code as 

```
const arr: (number | string)[] = [1, 2, 3, 4, 5, "aditya", 'string'];
console.log(arr);
```
This way you can store numbers and strings in the same array. 

**2. Type Aliases**

TypeScript's type aliases allow you to create a new name for a type. This can be useful for simplifying complex type definitions and improving code readability. You can create type aliases for various types including primitive types, union types, object types, and more.

Let's see what is type aliases with some examples,
Suppose you want to define an object with some property inside it like we mentioned above 

```
const user = {
    name:"aditya",
    age:21,
}
```
so what you can do is you can define a type alias for the whole object.
To define the type alias you have to use the keyword `type`.

```
type User= {
  name: string;
  age: number;
};
```
and then you can assign it to an object like 

```
const user:User = {
    name:"aditya",
    age:21,
}
```
You can use type alliance with string, number, booleans, object, array, and functions. 

if you want to make any value optional then you can use `?` to make it optional 
for example, you want to make age an optional parameter so what you can do is that

```
type User= {
  name: string;
  age?: number;
};
```


**3. Interface** 
In TypeScript, interfaces are a powerful way to define the structure of objects. They provide a way to define the shape of an object, including the types of its properties and the functions it can contain. Interfaces are especially useful for defining complex types and ensuring type safety in your code.

```
interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Aditya",
  age: 21,
};

```


Thank you for joining me on this journey through the 100 Days Full Stack Challenge. Each day brings new insights, challenges, and opportunities for growth, and I'm thrilled to share every step with you. Your support and feedback mean the world to me, and I'm excited to continue building and learning together. 🚀

Don't forget to follow my progress on my personal website and stay connected on [Dev.to](https://dev.to/zendeaditya), [Medium](https://medium.com/@adityazende), and [Hashnode](https://hashnode.com/@adityazende01). Let's keep pushing the boundaries of what's possible in web development! 🌐💻

Until next time, keep coding, keep creating, and keep pushing forward. 💪✨