Aditya Zende's blog
Exploring the concept of the Typescript - Day 2 Of #100DaysOfFullStackChallnege

Exploring the concept of the Typescript - Day 2 Of #100DaysOfFullStackChallnege

Aditya Zende's photo
Aditya Zende
·

4 min read

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; }'.

    1. 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, Medium, and Hashnode. Let's keep pushing the boundaries of what's possible in web development! 🌐💻

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

TypeScriptWeb Development100DaysOfCode