Foundation for TypeScript

Before learning TypeScript, you must understand the core concepts of JavaScript. TypeScript is essentially JavaScript + static typing, so strong JavaScript knowledge is essential.

Below is the JavaScript Fundamentals Roadmap.

1. JavaScript Basics

Learn the basic syntax and structure.

Topics

• Variables
• Data types
• Operators
• Comments
• Console output

Example:

let name = "Akshay";
let age = 30;

console.log(name);

let name = "Akshay";
let age = 30;

console.log(name);

2. Variables (var, let, const)

Understand variable declaration.

Example:

let city = "Delhi";
const country = "India";

let city = "Delhi";
const country = "India";

3. Data Types

Important JavaScript data types:

Primitive Types

• String
• Number
• Boolean
• Null
• Undefined
• Symbol
• BigInt

Reference Types

• Object
• Array
• Function

Example:

let name = "John";
let age = 25;
let isActive = true;

4. Operators

Learn common operators.

Types

• Arithmetic (+ - * /)
• Comparison (== ===)
• Logical (&& || !)
• Assignment (=)

Example:

let a = 10;
let b = 5;

console.log(a + b);

let a = 10;
let b = 5;

console.log(a + b);

5. Control Flow

Learn decision-making structures.

Topics

• if
• else
• switch

Example:

let age = 20;

if(age >= 18){
 console.log("Adult");
}else{
 console.log("Minor");
}

let age = 20;

if(age >= 18){
 console.log("Adult");
}else{
 console.log("Minor");
}

6. Loops

Loops allow repeating tasks.

Types

• for
• while
• do while
• for...of
• for...in

Example:

for(let i=0;i<5;i++){
 console.log(i);
}

for(let i=0;i<5;i++){
 console.log(i);
}

7. Functions

Functions are reusable blocks of code.

Types

• Function declaration
• Function expression
• Arrow function

Example:

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

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

Arrow function:

const add = (a,b) => a + b;

const add = (a,b) => a + b;

8. Arrays

Arrays store multiple values.

Example:

let numbers = [1,2,3,4];

numbers.push(5);
console.log(numbers);

let numbers = [1,2,3,4];

numbers.push(5);
console.log(numbers);

Common methods:

• push()
• pop()
• map()
• filter()
• reduce()

9. Objects

Objects store key-value pairs.

Example:

let user = {
 name: "Akshay",
 age: 30
};

console.log(user.name);

let user = {
 name: "Akshay",
 age: 30
};

console.log(user.name);

10. ES6 Features (Very Important)

Modern JavaScript introduced many features.

Important ES6 concepts

• Arrow functions
• Template literals
• Destructuring
• Spread operator
• Rest operator

Example:

const user = {name:"Akshay", age:30};

const {name,age} = user;

const user = {name:"Akshay", age:30};

const {name,age} = user;

11. Modules (Import / Export)

Modules help organize code.

Example:

export function sum(a,b){
 return a+b;
}

export function sum(a,b){
 return a+b;
}

Import:

import {sum} from "./math.js";

import {sum} from "./math.js";

12. Promises

Promises handle asynchronous operations.

Example:

const promise = new Promise((resolve,reject)=>{
 resolve("Success");
});

const promise = new Promise((resolve,reject)=>{
 resolve("Success");
});

13. Async / Await

Simplifies asynchronous programming.

Example:

async function getData(){
 const response = await fetch(url);
}

async function getData(){
 const response = await fetch(url);
}

14. DOM Basics (Optional but Useful)

Used for web development.

Example:

document.getElementById("title").innerText = "Hello";

document.getElementById("title").innerText = "Hello";

Recommended Learning Time

Total: 5–7 days

What You Should Know Before Moving to TypeScript

Make sure you understand:

• ES6 syntax
• Arrow functions
• Destructuring
• Promises
• Async / Await
• Modules

Once you know these, learning TypeScript becomes very easy.