JavaScript vs TypeScript: Level 0 to Infinity

1. Introduction

JavaScript and TypeScript are closely related. JavaScript is the main language of the browser. TypeScript is a typed version of JavaScript that helps developers catch mistakes earlier.

CopyTypeScript code
  ↓ compile
JavaScript code
  ↓ run
Browser / Node.js

2. Level 0 Meaning

JavaScript lets you write code quickly. TypeScript makes you write code more carefully.

One-line Difference

CopyJavaScript: value first, type later.
TypeScript: type known before running.

3. Main Difference Between JavaScript and TypeScript

4. Why TypeScript Exists

JavaScript is powerful, but because it is very flexible, mistakes can hide until the program runs. TypeScript adds type checking so many mistakes are found earlier.

JavaScript Example

Copylet marks = 90;

marks = "ninety";

console.log(marks);

JavaScript allows this. The variable first had a number, then a string.

TypeScript Example

Copylet marks: number = 90;

marks = "ninety";

5. Execution Flow

JavaScript and TypeScript follow different paths before running.

6. Variables: JavaScript vs TypeScript

JavaScript

Copylet course = "Angular";
let duration = 30;
let isActive = true;

TypeScript

Copylet course: string = "Angular";
let duration: number = 30;
let isActive: boolean = true;

Type Inference

Copylet course = "Angular";

// TypeScript understands:
// course is a string

7. Basic Types in TypeScript

TypeScript gives names to the kind of data a variable can hold.

8. Functions

JavaScript Function

Copyfunction add(a, b) {
  return a + b;
}

console.log(add(10, 20));
console.log(add("10", 20));

JavaScript allows both calls. The second call may create unexpected output.

TypeScript Function

Copyfunction add(a: number, b: number): number {
  return a + b;
}

console.log(add(10, 20));
console.log(add("10", 20));

Angular Style Method

CopyloadCourse(id: number): void {
  console.log("Loading course", id);
}

9. Objects

JavaScript Object

Copyconst student = {
  name: "Riya",
  marks: 92
};

student.marks = "excellent";

JavaScript allows this unless the code logic prevents it.

TypeScript Object

Copyconst student: {
  name: string;
  marks: number;
} = {
  name: "Riya",
  marks: 92
};

student.marks = "excellent";

10. Arrays

JavaScript Array

Copylet marks = [90, 85, 77];

marks.push("absent");

TypeScript Array

Copylet marks: number[] = [90, 85, 77];

marks.push("absent");

Array of Objects

Copylet courses: { id: number; title: string }[] = [
  { id: 1, title: "Angular Basics" },
  { id: 2, title: "Angular Routing" }
];

11. Union Types

Sometimes a value can be one of several types. TypeScript supports this using union types.

Copylet studentId: number | string;

studentId = 101;
studentId = "STU-101";

Status Example

Copylet status: "draft" | "published" | "archived";

status = "draft";
status = "published";
status = "deleted";

12. Interfaces

Interfaces define the shape of an object. They are extremely useful in Angular apps.

Without Interface

Copyconst course: { id: number; title: string; price: number } = {
  id: 1,
  title: "Angular Routing",
  price: 499
};

With Interface

Copyinterface Course {
  id: number;
  title: string;
  price: number;
}

const course: Course = {
  id: 1,
  title: "Angular Routing",
  price: 499
};

Angular Service Example

Copyinterface Course {
  id: number;
  title: string;
  level: "beginner" | "intermediate" | "advanced";
}

getCourses(): Course[] {
  return [
    { id: 1, title: "Angular Basics", level: "beginner" },
    { id: 2, title: "Angular Routing", level: "intermediate" }
  ];
}

13. Classes

JavaScript has classes, but TypeScript makes classes clearer with typed properties and methods.

JavaScript Class

Copyclass Student {
  constructor(name, marks) {
    this.name = name;
    this.marks = marks;
  }

  showResult() {
    return this.name + " scored " + this.marks;
  }
}

TypeScript Class

Copyclass Student {
  name: string;
  marks: number;

  constructor(name: string, marks: number) {
    this.name = name;
    this.marks = marks;
  }

  showResult(): string {
    return `${this.name} scored ${this.marks}`;
  }
}

Shorter TypeScript Constructor

Copyclass Student {
  constructor(
    public name: string,
    public marks: number
  ) {}

  showResult(): string {
    return `${this.name} scored ${this.marks}`;
  }
}

14. Error Detection

One of TypeScript’s biggest benefits is early error detection.

JavaScript Error Appears at Runtime

Copyfunction printTitle(course) {
  console.log(course.title.toUpperCase());
}

printTitle({ name: "Angular" });

JavaScript may fail while running because title does not exist.

TypeScript Error Appears Earlier

Copyinterface Course {
  title: string;
}

function printTitle(course: Course): void {
  console.log(course.title.toUpperCase());
}

printTitle({ name: "Angular" });

15. Compilation

TypeScript must be compiled to JavaScript.

Install TypeScript

Copynpm install -g typescript

Compile a TypeScript File

Copytsc app.ts

This creates:

Copyapp.js

Angular Compilation

Copyng build

16. Why Angular Uses TypeScript

Angular projects use TypeScript because Angular apps usually have many components, services, forms, routes, APIs, models, and shared data. TypeScript makes these easier to manage.

Angular Component Example

Copyimport { Component } from '@angular/core';

interface Course {
  id: number;
  title: string;
  level: string;
}

@Component({
  selector: 'app-courses',
  templateUrl: './courses.html',
  styleUrl: './courses.css'
})
export class Courses {
  courses: Course[] = [
    { id: 1, title: "Angular Basics", level: "Beginner" },
    { id: 2, title: "Routing in Angular", level: "Intermediate" }
  ];

  selectCourse(course: Course): void {
    console.log(course.title);
  }
}

Angular Template

Copy<h2>Courses</h2>

@for (course of courses; track course.id) {
  <article>
    <h3>{{ course.title }}</h3>
    <p>{{ course.level }}</p>
    <button (click)="selectCourse(course)">Select</button>
  </article>
}

17. Moving from JavaScript to TypeScript

To move from JavaScript to TypeScript, do not try to learn everything at once. Add types step by step.

Step 1: JavaScript

Copyfunction calculateTotal(price, quantity) {
  return price * quantity;
}

Step 2: Add Parameter Types

Copyfunction calculateTotal(price: number, quantity: number) {
  return price * quantity;
}

Step 3: Add Return Type

Copyfunction calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

Step 4: Use Interface for Objects

Copyinterface CartItem {
  price: number;
  quantity: number;
}

function calculateTotal(item: CartItem): number {
  return item.price * item.quantity;
}

18. Expert-Level Differences

At expert level, TypeScript is not only about adding : string or : number. It is about designing safer systems.

Generic Example

Copyfunction firstItem<T>(items: T[]): T {
  return items[0];
}

const firstNumber = firstItem<number>([10, 20, 30]);
const firstName = firstItem<string>(["Angular", "TypeScript"]);

API Response Generic

Copyinterface ApiResponse<T> {
  success: boolean;
  data: T;
  message: string;
}

interface Course {
  id: number;
  title: string;
}

const response: ApiResponse<Course[]> = {
  success: true,
  data: [
    { id: 1, title: "Angular Basics" }
  ],
  message: "Courses loaded"
};

19. Common Mistakes

20. Student Assignment

Convert the following JavaScript code into TypeScript.

JavaScript Code

Copyconst students = [
  { id: 1, name: "Amit", marks: 88 },
  { id: 2, name: "Riya", marks: 94 },
  { id: 3, name: "John", marks: 76 }
];

function getTopStudents(students, minimumMarks) {
  return students.filter(student => student.marks >= minimumMarks);
}

console.log(getTopStudents(students, 80));

Expected TypeScript Direction

Copyinterface Student {
  id: number;
  name: string;
  marks: number;
}

const students: Student[] = [
  { id: 1, name: "Amit", marks: 88 },
  { id: 2, name: "Riya", marks: 94 },
  { id: 3, name: "John", marks: 76 }
];

function getTopStudents(
  students: Student[],
  minimumMarks: number
): Student[] {
  return students.filter(student => student.marks >= minimumMarks);
}

console.log(getTopStudents(students, 80));

Final Summary