4) Typescript Interfaces and Types

Interfaces in TypeScript
An interface defines the structure of an object. It is commonly used in,
i) React Props
ii) API response models
iii) Class contracts
iv) Reusable object structures

interface User {
  id: number;
  name: string;
  isAdmin: boolean;
}

const user: User = {
  id: 1,
  name: "Rahul",
  isAdmin: true,
};

React Example

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

const UserCard = ({ name, age }: UserProps) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  );
};

Extending Interfaces
Interfaces can inherit properties from other interfaces using extends. This helps: Reusability, Scalability, Clean architecture

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

interface Employee extends Person {
  employeeId: number;
  department: string;
}

const emp: Employee = {
  name: "Rahul",
  age: 30,
  employeeId: 101,
  department: "IT",
};

React Example

interface BaseProps {
  title: string;
}

interface CardProps extends BaseProps {
  description: string;
}

const Card = ({ title, description }: CardProps) => {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
};

Type Aliases in TypeScript
A type alias creates reusable custom types. Can be used for: Objects, Functions, Unions, Tuples, Primitive aliases.

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

const user: User = {
  id: 1,
  name: "Rahul",
};

React Example

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

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

Extending Types
Intersection types combine multiple types using &. The resulting type contains all properties.

type Person = {
  name: string;
};

type Employee = {
  employeeId: number;
};

type Staff = Person & Employee;

const staff: Staff = {
  name: "Rahul",
  employeeId: 101,
};

React Example

type BaseProps = {
  title: string;
};

type StyleProps = {
  color: string;
};

type HeaderProps = BaseProps & StyleProps;

const Header = ({ title, color }: HeaderProps) => {
  return <h1 style={{ color }}>{title}</h1>;
};

Difference between Interface and Type
i) Both are used to define custom types.
ii) interface is mainly used for object-oriented design and supports declaration merging.
iii) type is more flexible and supports unions, intersections, tuples, and primitive aliases.
iv) Interfaces use extends, while types commonly use &.
v) In React, both are widely used, but type is often preferred for props and advanced compositions.