Tag: typescript

Type vs Interface in TypeScript: Complete Guide with Examples (Beginner to Advanced)

When working with TypeScript, one of the most common questions is:

🤔 Should I use type or interface?

Both are used to define the structure of data, but they behave differently in certain scenarios.

In this guide, you’ll learn:

  • What type and interface are
  • Key differences
  • All important scenarios with examples
  • When to use each (very important)

What is interface in TypeScript?

An interface is used to define the structure (shape) of an object.

Basic Example

interface User {
  name: string;
  age: number;
}
const user: User = {
  name: "Raju",
  age: 25,
};

What is type in TypeScript?

A type is more flexible and can define:

  • Objects
  • Primitives
  • Unions
  • Tuples
  • Functions

Basic Example

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

👉 Works similar to interface for objects

Key Differences (Quick Overview)

Featureinterfacetype
Object structure✅ Yes✅ Yes
Union types❌ No✅ Yes
Intersection types⚠️ Limited✅ Yes
Declaration merging✅ Yes❌ No
FlexibilityMediumHigh

Scenario 1: Object Definition

👉 Both work the same

interface User {
  name: string;
}
type User = {
  name: string;
};

✅ No major difference here

Scenario 2: Declaration Merging (Important)

✅ interface supports merging

interface User {
  name: string;
}

interface User {
  age: number;
}

👉 Result:

{
  name: string;
  age: number;
}

❌ type does NOT support merging

type User = {
  name: string;
};

type User = {
  age: number;
}; // ❌ Error

Scenario 3: Union Types

✅ Using type

type Status = "success" | "error" | "loading";

❌ interface cannot do this

👉 Not supported

Scenario 4: Intersection Types

✅ Using type

type Person = {
  name: string;
};

type Employee = Person & {
  salary: number;
};

⚠️ interface alternative

interface Person {
  name: string;
}

interface Employee extends Person {
  salary: number;
}

Scenario 5: Functions

✅ Using type

type Add = (a: number, b: number) => number;

✅ Using interface

interface Add {
  (a: number, b: number): number;
}

Scenario 6: Extending / Inheritance

interface

interface Person {
  name: string;
}

interface Employee extends Person {
  salary: number;
}

type

type Person = {
  name: string;
};

type Employee = Person & {
  salary: number;
};

Scenario 7: Primitive Types

✅ Only type supports this

type ID = string | number;

👉 interface cannot do this ❌

Scenario 8: Tuples

type Point = [number, number];

👉 Only type supports tuples

Scenario 9: Working with Classes

interface (preferred)

interface User {
  name: string;
}

class Person implements User {
  name = "Raju";
}

When to Use interface

Use interface when:

  • Defining object structure
  • Working with classes
  • Need declaration merging
  • Building large applications

When to Use type

Use type when:

  • Using unions (|)
  • Using intersections (&)
  • Working with primitives
  • Advanced type logic

Best Practice (Very Important)

👉 Use both together:

type Status = "success" | "error";

interface ApiResponse {
  status: Status;
  data: string;
}

Common Mistakes

❌ Using interface for unions

interface Status = "success" | "error"; // ❌

❌ Overusing any

👉 Avoid losing type safety

❌ Confusion between both

👉 Use based on use case

Interview Tip

If asked:

“type vs interface?”

👉 Answer:

“Both define data shapes, but type is more flexible (supports unions, tuples), while interface supports declaration merging and is better for object-oriented design.”

Final Summary

  • Both define structure of data
  • interface → best for objects & classes
  • type → best for advanced types
  • Use both based on need
💡 Found this helpful? Subscribe to get simple TypeScript tutorials, interview questions, and real-world coding tips. Happy Coding!

TypeScript Error: “Object literal may only specify known properties” (Fix Explained)

While working with TypeScript, you might encounter this error:

Object literal may only specify known properties, and 'age' does not exist in type 'User'

This error can be confusing for beginners.

In this guide, you’ll learn:

  • What this error means
  • Why it happens
  • How to fix it (step-by-step)
  • Common mistakes to avoid

What Does This Error Mean?

👉 In simple terms:

TypeScript is telling you that you are adding a property that is not defined in the type or interface

Example That Causes the Error

interface User {
  name: string;
}

const user: User = {
  name: "Raju",
  age: 25, // ❌ Error here
};

👉 Error:

Object literal may only specify known properties, and 'age' does not exist in type 'User'

Why This Error Happens

TypeScript uses strict type checking.

👉 It ensures that:

  • You only use properties defined in the type
  • No extra or unexpected data is added

How to Fix This Error

Fix 1: Add the Missing Property

If the property is valid, add it to the interface:

interface User {
  name: string;
  age: number;
}

👉 Now it works ✅

Fix 2: Remove Extra Property

If the property is not needed:

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

Fix 3: Use Index Signature (Flexible Objects)

If object can have dynamic properties:

interface User {
  name: string;
  [key: string]: any;
}

👉 Allows extra properties ✅

Fix 4: Use Type Assertion (Use Carefully)

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

⚠️ This tells TypeScript to ignore extra properties
👉 Use only when you are sure

Fix 5: Assign Object to Variable First

const temp = {
  name: "Raju",
  age: 25,
};

const user: User = temp;

👉 This may bypass strict checking in some cases

⚠️ Common Mistakes

❌ Typo in property name

namee: "Raju" // ❌ wrong

❌ Forgetting to update interface

👉 Adding new fields but not updating type

❌ Overusing any

👉 Removes TypeScript benefits

Real-World Scenario

Imagine:

👉 API returns:

{
  "name": "Raju",
  "age": 25
}

But your interface is:

interface User {
  name: string;
}

👉 You’ll get this error

Best Practices

  • Keep types updated
  • Avoid unnecessary properties
  • Use strict typing
  • Avoid overusing any

Interview Tip

If asked:

“What is this error?”

👉 Answer:

“It occurs when an object contains properties that are not defined in its type or interface.”

Final Summary

  • TypeScript enforces strict object structure
  • Extra properties cause this error
  • Fix by updating type or removing extra fields
  • Use index signature for flexible objects

Related Articles

💡 Facing more TypeScript errors? Subscribe to get simple fixes, real-world examples, and developer-friendly explanations. Happy Coding!

TypeScript: Index signature for type ‘string’ is missing in type …

The error “Index signature for type ‘string’ is missing in type” occurs in TypeScript when we are trying to access a property using a dynamic string, but the object type doesn’t define an index signature to accommodate that.

For Example, The above Error will come in the following scenario

index.ts

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

const person: Person = { name: "Joy", age: 20 };

const key = "email";

console.log(person[key]); // Error: Index signature is missing

In the above example, typescript throws an error because key could be any string, but the Person type only explicitly defines name and age. To fix this we can add an index signature to the type as follows.

index.ts

type Person = {
  name: string;
  age: number;
  [key: string]: string // index signature allows only string values
};

const person: Person = { name: "Joy", age: 20, email: "joy@gmail.com" };

const key= "email";

console.log(person[key]); // No Error