Hey everyone! I am Mihir, a Senior Software Developer and your mentor for this TypeScript journey.

If you already know some JavaScript, TypeScript is one of the best next steps you can take. It helps you write code that is easier to understand, easier to refactor, and much safer when your project starts growing.

In this TypeScript series, we will go from complete beginner level to real-world confidence. We will not just memorize syntax. We will understand why each feature exists, where it helps, and how professional developers use it in actual apps.

What is TypeScript?

TypeScript is a programming language created by Microsoft that builds on top of JavaScript.

The simplest definition is:

TypeScript is JavaScript with static types.

That means every valid JavaScript program is also close to being valid TypeScript, but TypeScript gives you extra tools to describe the shape of your data.

let username: string = "Mihir";
let age: number = 25;
let isDeveloper: boolean = true;

In JavaScript, the same code would look like this:

let username = "Mihir";
let age = 25;
let isDeveloper = true;

Both versions run with similar values, but TypeScript understands that:

• username should be a string
• age should be a number
• isDeveloper should be a boolean

So if you accidentally write this:

age = "twenty five";

TypeScript warns you before the code reaches production.

TypeScript Does Not Replace JavaScript

This is very important:

TypeScript does not run directly in the browser in normal projects.

Browsers understand JavaScript, not TypeScript. So TypeScript code is converted into JavaScript before it runs.

This conversion process is called compilation or transpilation.

TypeScript code (.ts)
        |
        v
TypeScript compiler
        |
        v
JavaScript code (.js)
        |
        v
Browser or Node.js

Example TypeScript:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("Mihir"));

After TypeScript compiles it, the JavaScript output may look like this:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Mihir"));

Notice what happened: the type annotations disappeared.

That is because TypeScript types are mainly for development. They help your editor and compiler catch mistakes, but the final runtime code is JavaScript.

Why Was TypeScript Created?

JavaScript is flexible, but that flexibility can become dangerous in large projects.

Look at this JavaScript function:

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

console.log(calculateTotal(100, 2));      // 200
console.log(calculateTotal("100", 2));    // 200
console.log(calculateTotal("free", 2));   // NaN

JavaScript allows all three calls. It only discovers the problem while the code is running.

Now see the TypeScript version:

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

console.log(calculateTotal(100, 2));
console.log(calculateTotal("free", 2));

TypeScript immediately complains:

Argument of type 'string' is not assignable to parameter of type 'number'.

That warning is the main power of TypeScript.

It catches a bug while you are coding, not after a user clicks the wrong button on your website.

Static Typing vs Dynamic Typing

To understand TypeScript properly, you need to understand the difference between dynamic typing and static typing.

Dynamic Typing

JavaScript is dynamically typed.

That means variable types are checked while the program is running.

let value = 10;
value = "Hello";
value = true;

JavaScript allows this because it does not lock value to one type.

This flexibility is useful for quick scripting, but it can create bugs in bigger apps.

Static Typing

TypeScript is statically typed.

That means types are checked before the program runs.

let value: number = 10;

value = "Hello";

TypeScript warns you because value was declared as a number.

Quick Comparison

Your First TypeScript Example

Let us create a small user profile example.

type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

const user: User = {
  id: 1,
  name: "Mihir",
  email: "mihir@example.com",
  isActive: true,
};

function printUser(user: User): void {
  console.log(`User: ${user.name}`);
  console.log(`Email: ${user.email}`);
  console.log(`Active: ${user.isActive}`);
}

printUser(user);

Let us understand this slowly.

The type Keyword

type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

This creates a custom type named User.

It says a valid user object must have:

• id as a number
• name as a string
• email as a string
• isActive as a boolean

The Typed Object

const user: User = {
  id: 1,
  name: "Mihir",
  email: "mihir@example.com",
  isActive: true,
};

Here we are telling TypeScript:

This object must follow the User structure.

If we forget a field:

const user: User = {
  id: 1,
  name: "Mihir",
  email: "mihir@example.com",
};

TypeScript warns us because isActive is missing.

If we use the wrong type:

const user: User = {
  id: "one",
  name: "Mihir",
  email: "mihir@example.com",
  isActive: true,
};

TypeScript warns us because id should be a number, not a string.

TypeScript Improves Your Editor

One of the best parts of TypeScript is not only error checking. It also makes your editor smarter.

When TypeScript knows the shape of your data, your editor can provide:

• Autocomplete
• Better suggestions
• Safer renaming
• Inline error messages
• Better documentation on hover
• Easier navigation between files

Example:

type Product = {
  id: number;
  title: string;
  price: number;
  inStock: boolean;
};

const product: Product = {
  id: 101,
  title: "Keyboard",
  price: 1499,
  inStock: true,
};

console.log(product.title);

When you type product., your editor can suggest:

• id
• title
• price
• inStock

This is extremely helpful in real projects where objects can have many properties.

TypeScript Helps Teams Work Better

When you work alone on a small file, you may remember what every function expects.

But in real projects:

• Files grow
• Components communicate with each other
• API responses become complex
• Multiple developers touch the same code
• Requirements change again and again

TypeScript acts like a contract between different parts of your app.

type LoginForm = {
  email: string;
  password: string;
};

function loginUser(form: LoginForm) {
  // form.email and form.password are guaranteed to exist here
}

Anyone using loginUser can immediately see what data it needs.

That makes the code more readable and reduces confusion.

Common Beginner Misunderstanding

Many beginners think TypeScript makes JavaScript slower because it adds extra syntax.

But TypeScript types are removed during compilation.

let score: number = 100;

Becomes:

let score = 100;

So TypeScript does not add runtime type checking by default.

It helps during development, then produces normal JavaScript.

When Should You Learn TypeScript?

You should learn TypeScript after you understand basic JavaScript concepts like:

• Variables
• Functions
• Arrays
• Objects
• Loops
• Basic DOM or Node.js usage

You do not need to be a JavaScript master before starting TypeScript, but you should know enough JavaScript to understand what TypeScript is improving.

If JavaScript is the language, TypeScript is the safety system around it.

Quick Reference Summary

Practice Examples

Try to understand what TypeScript will complain about in each example.

Example 1

let courseName: string = "TypeScript";
courseName = 100;

Problem: courseName is a string, but we are assigning a number.

Example 2

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

add(10, "20");

Problem: The second argument should be a number.

Example 3

type Student = {
  name: string;
  marks: number;
};

const student: Student = {
  name: "Mihir",
};

Problem: The marks property is missing.

What You've Learned

You now understand:

• What TypeScript is
• How TypeScript relates to JavaScript
• Why TypeScript code compiles to JavaScript
• What static typing means
• How TypeScript catches mistakes early
• Why TypeScript is useful in large projects
• How custom object types describe data clearly

What's Next?

In the next lesson, we will go deeper into Why TypeScript.

We will understand the real problems TypeScript solves in day-to-day development, especially bugs that are common in JavaScript projects.

Need Help?

• Have questions, confusion, or want to know more? Contact me

Keep practicing. TypeScript may feel strict in the beginning, but that strictness becomes your best friend when your codebase grows.