Learning Typescript from noob to pro

Day 1 of learning typescript under the guidance of Harkirat Singh's 100xDev Cohort 2

1️⃣ Managing Files and Folder Structure

• Learned how to organize files properly in a TypeScript project.

• The src folder contains all TypeScript (.ts) files.

• The dist folder stores the compiled JavaScript (.js) files.

2️⃣ Configuring TypeScript with tsconfig.json

• Understood how to use the TypeScript configuration file (tsconfig.json).

• Set src as rootDir and dist as outDir to manage compiled output properly.

3️⃣ Understanding interface vs type in TypeScript

• Explored how both interface and type help define object structures.

• Key difference: interface allows implementation in classes, whereas type doesn’t.

Interface in typescript

here is an example of simple function which checks whether the user is under age or not

interface User {
    firstName: string;
    email: string;
    age: number;
}

function islegal(user:User) {
    if(user.age>18) {
     return true;
    }else{
   return false;
 }
}

Another key thing I learned is that TypeScript doesn't run directly in the browser. Instead, it first compiles into JavaScript, which the browser can understand. TypeScript is just a developer-friendly layer, and everything works under the hood with JavaScript. After writing an interface, we can convert it into a JavaScript file using the following command:

tsc -b

I observed that JavaScript doesn’t understand the interface concept, so it converts the code like this.

"use strict";   // use strict basically means type checking  is strict or something 

function islegal(user) {
    if (user.age > 18) {
        return true;
    }
    else {
        return false;
    }
}

here we can finally code written in js is different as that of typescript after conversion

Type in typescript and how it differ from interfaces ?

Other core concept i just learnt was type .Type is just same as interface but the only core difference between them is interface allow u to implement the classes just like java and type doesnt

let me explain with the help of a simple example

interface animal {
name : string ;
family: string ;
kindgom:string ;
age : number ;
sound (phase: string):void  
}

class Dog implements animal {
   name : string ;
    age: number ;
  constructor (n:string, a:number){
      this.name = n;
      this.age= a;
}
    sound (phase: string ){
     console.log(`${phase} ${this.name}`);
  }

}

Here in this code we can say interface can let u allow use of the class based implementation and use you to combine the interface with class .Key take aways are from this :

• The Animal interface defines a structure that every class implementing it must follow.

• The Dog class implements the Animal interface, meaning it must include all properties and methods defined in the interface.

• Unlike type, interfaces allow class-based implementation, making them more suited for object-oriented programming.

This is why interfaces in TypeScript are similar to Java interfaces—they enforce structure while allowing flexibility in implementation.

Types in Typescript and with example

In TypeScript, when we aren't sure what type to assign to a variable or function, instead of using any, we have better alternatives that ensure type safety. Let's explore which types come into play in such scenarios.

Let’s say we want to print the id of a user, which can be a number or a string. and we are unsure of it whether to take it string or boolean or number

type Stringornumber= string|number

function PrintId(id:Stringornumber){
   console.log(`ID:${id}`);
}
printId(101);// giving number
printId("101");

here we cannot use interface here

Another operation of the type is intersection. Intersection create a type that has every property of multiple types/ interfaces.Let’s see an example of the interface

type Employee = {
  name: string;
  startDate: Date;
};

type Manager = {
  name: string;
  department: string;
};

type TeamLead = Employee & Manager;

const teamLead: TeamLead = {
  name: "Ram",
  startDate: new Date(),
  department: "Software developer"
};

Key Takeaway

✅ On the left side, we define type or interface.
❌ On the right side, we cannot use type or interface directly—it must be a valid object or value.

This rule applies to both type and interface in TypeScript.

That’s everything I learned on Day 1. Excited to dive deeper into TypeScript in the coming day