Welcome back! I am Mihir, and in this lesson we will compare TypeScript vs JavaScript in a clear beginner-friendly way.

This lesson is important because many beginners think TypeScript is a completely different replacement for JavaScript. It is not.

TypeScript is built on top of JavaScript. To become good at TypeScript, you still need to understand JavaScript.

The Short Answer

JavaScript is the language that runs in browsers and Node.js.

TypeScript is a typed version of JavaScript that gets converted into JavaScript.

JavaScript:
Write .js code -> run it directly

TypeScript:
Write .ts code -> compile to .js -> run JavaScript

So the relationship is:

TypeScript = JavaScript + Type System

Basic Syntax Comparison

JavaScript:

let name = "Mihir";
let age = 25;

function greet(name) {
  return "Hello, " + name;
}

console.log(greet(name));

TypeScript:

let name: string = "Mihir";
let age: number = 25;

function greet(name: string): string {
  return "Hello, " + name;
}

console.log(greet(name));

The TypeScript version adds type annotations:

• name: string
• age: number
• function parameter name: string
• function return type : string

These annotations help TypeScript check your code before it runs.

Difference 1: Type Checking

JavaScript checks types at runtime.

function double(value) {
  return value * 2;
}

console.log(double(10));       // 20
console.log(double("10"));     // 20
console.log(double("hello"));  // NaN

JavaScript allows all these calls.

TypeScript checks types before runtime.

function double(value: number): number {
  return value * 2;
}

console.log(double(10));
console.log(double("hello"));

TypeScript warns:

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

Key Idea

JavaScript says:

Run first, discover type problems later.

TypeScript says:

Check first, run after the code looks safe.

Difference 2: Compilation

JavaScript can run directly:

app.js -> browser or Node.js

TypeScript needs a compiler:

app.ts -> TypeScript compiler -> app.js -> browser or Node.js

Example TypeScript:

type User = {
  name: string;
  age: number;
};

const user: User = {
  name: "Mihir",
  age: 25,
};

console.log(user.name);

Compiled JavaScript:

const user = {
  name: "Mihir",
  age: 25,
};

console.log(user.name);

The type User part disappears because types are only used during development.

Difference 3: Error Timing

JavaScript often shows errors when the code executes.

const user = {
  name: "Mihir",
};

console.log(user.email.toLowerCase());

This crashes at runtime:

TypeError: Cannot read properties of undefined

TypeScript shows the problem earlier:

type User = {
  name: string;
};

const user: User = {
  name: "Mihir",
};

console.log(user.email.toLowerCase());

TypeScript warns:

Property 'email' does not exist on type 'User'.

This difference is huge in real projects.

Difference 4: Objects and Data Shapes

JavaScript:

const course = {
  title: "TypeScript",
  duration: "30 days",
};

course.price = 999;

JavaScript allows adding new properties anytime.

TypeScript:

type Course = {
  title: string;
  duration: string;
};

const course: Course = {
  title: "TypeScript",
  duration: "30 days",
};

course.price = 999;

TypeScript warns:

Property 'price' does not exist on type 'Course'.

If price is part of the design, add it to the type:

type Course = {
  title: string;
  duration: string;
  price: number;
};

This forces your code and your data model to stay aligned.

Difference 5: Function Contracts

In JavaScript, this function is not very clear:

function registerUser(user) {
  return user.email.includes("@");
}

What should user contain?

TypeScript makes the contract clear:

type RegisterUserInput = {
  name: string;
  email: string;
  password: string;
};

function registerUser(user: RegisterUserInput): boolean {
  return user.email.includes("@");
}

Now we know:

• name is required
• email is required
• password is required
• the function returns a boolean

This makes your code easier to use correctly.

Difference 6: Tooling and Autocomplete

JavaScript editors can provide autocomplete, but TypeScript gives much stronger information because it understands your types.

type BlogPost = {
  title: string;
  slug: string;
  views: number;
  published: boolean;
};

const post: BlogPost = {
  title: "TypeScript vs JavaScript",
  slug: "typescript-vs-javascript",
  views: 1200,
  published: true,
};

console.log(post.title);

When you type post., your editor can suggest all available properties.

This is helpful when working with:

• API responses
• React props
• Database models
• Form data
• Configuration objects
• Utility functions

Difference 7: Learning Curve

JavaScript is easier to start because there are fewer rules.

let value = 10;
value = "hello";
value = true;

TypeScript is stricter.

let value: number = 10;
value = "hello";

This strictness can feel annoying at first.

But slowly you realize TypeScript is not blocking you for fun. It is showing places where your code might become unclear or unsafe.

Beginner Advice

Do not try to learn every advanced TypeScript feature at once.

Start with:

• Basic types
• Arrays
• Objects
• Functions
• Type aliases
• Interfaces
• Union types

These concepts cover a lot of real-world TypeScript.

Difference 8: Flexibility vs Safety

JavaScript gives maximum flexibility.

TypeScript gives controlled flexibility.

JavaScript:

let data = "Mihir";
data = 25;
data = { role: "developer" };

TypeScript:

let data: string = "Mihir";
data = 25;

TypeScript says no because data was declared as a string.

If a value can really have multiple types, TypeScript supports that too:

let id: string | number;

id = "user_101";
id = 101;

This is called a union type.

So TypeScript is not against flexibility. It just asks you to be clear about it.

Difference 9: Project Size

For small experiments, JavaScript is often enough.

Example:

console.log("Quick script");

But for larger apps, TypeScript becomes more useful.

TypeScript helps when:

• The project has many files
• The app has many data models
• Multiple developers work together
• You use APIs heavily
• You use frameworks like React, Next.js, Angular, or NestJS
• You need long-term maintainability

That is why many modern production apps use TypeScript by default.

Side-by-Side Comparison

Example: Same Feature in JavaScript and TypeScript

Let us build a small cart total calculator.

JavaScript Version

const cart = [
  { title: "Keyboard", price: 1500, quantity: 1 },
  { title: "Mouse", price: 800, quantity: 2 },
];

function calculateCartTotal(items) {
  return items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}

console.log(calculateCartTotal(cart));

This works, but items can be anything.

This would also be allowed:

calculateCartTotal("not a cart");

It will crash at runtime.

TypeScript Version

type CartItem = {
  title: string;
  price: number;
  quantity: number;
};

const cart: CartItem[] = [
  { title: "Keyboard", price: 1500, quantity: 1 },
  { title: "Mouse", price: 800, quantity: 2 },
];

function calculateCartTotal(items: CartItem[]): number {
  return items.reduce((total, item) => {
    return total + item.price * item.quantity;
  }, 0);
}

console.log(calculateCartTotal(cart));

Now TypeScript knows:

• items must be an array
• every item must have title, price, and quantity
• price and quantity must be numbers
• the function returns a number

This is safer and easier to understand.

Can You Use JavaScript Knowledge in TypeScript?

Yes. Almost everything you learn in JavaScript still matters.

TypeScript uses JavaScript concepts like:

• Variables
• Functions
• Objects
• Arrays
• Classes
• Promises
• Modules
• DOM APIs
• Async/await

TypeScript adds concepts like:

• Type annotations
• Interfaces
• Type aliases
• Union types
• Generics
• Utility types
• Type narrowing

So do not think of TypeScript as a separate world.

Think of it as the professional safety layer around JavaScript.

When Should You Choose JavaScript?

JavaScript is a good choice when:

• You are learning programming basics
• You are making a small script
• You need a quick prototype
• The project is tiny
• The team does not know TypeScript yet

JavaScript is still powerful and important.

When Should You Choose TypeScript?

TypeScript is a good choice when:

• You are building a serious web app
• You are using React, Next.js, Angular, Vue, or Node.js
• Your data models are complex
• The project will grow over time
• Multiple people will maintain the code
• You care about safer refactoring
• You want better editor support

Most modern frontend and backend TypeScript projects use TypeScript because the long-term benefits are strong.

Common Question: Is TypeScript Slower Than JavaScript?

At runtime, TypeScript becomes JavaScript.

So this TypeScript:

let count: number = 10;

becomes JavaScript:

let count = 10;

TypeScript itself does not make the browser run typed code.

The compilation step may take time during development or build, but the final code is JavaScript.

Common Question: Do I Need TypeScript for React?

You can use React with JavaScript or TypeScript.

But TypeScript is very helpful in React because you can type:

• Component props
• State
• Events
• API responses
• Context values
• Custom hooks

Example:

type ButtonProps = {
  label: string;
  disabled?: boolean;
  onClick: () => void;
};

function Button({ label, disabled = false, onClick }: ButtonProps) {
  return (
    <button disabled={disabled} onClick={onClick}>
      {label}
    </button>
  );
}

Now the component clearly tells other developers how to use it.

What You've Learned

You now understand:

• JavaScript runs directly, TypeScript compiles to JavaScript
• TypeScript adds static type checking
• TypeScript catches many errors earlier
• TypeScript improves editor autocomplete and refactoring
• JavaScript is flexible, TypeScript is safer
• TypeScript is especially useful for large apps
• JavaScript knowledge is still required for TypeScript

What's Next?

In the next lesson, we will set up TypeScript on your system.

We will install TypeScript, create a small project, compile .ts files into .js, and understand the basic development workflow.

Need Help?

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

Keep going. Once the difference between JavaScript and TypeScript becomes clear, the rest of the journey becomes much easier.