Interfaces in TypeScript

An interface defines the expected structure of an object.

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

Any object assigned to the Student interface must contain name and age with the specified types.

An interface is created using the interface keyword.

interface InterfaceName {
    property: type;
}

Example:

interface User {
    name: string;
}

An interface can be used as the type of an object.

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

const student: Student = {
    name: "Amit",
    age: 20
};

An interface can contain string properties.

interface User {
    name: string;
    email: string;
}

const user: User = {
    name: "Rahul",
    email: "rahul@example.com"
};

Number properties can be defined inside an interface.

interface Product {
    id: number;
    price: number;
}

const product: Product = {
    id: 101,
    price: 15000
};

Interfaces can also define boolean properties.

interface User {
    name: string;
    active: boolean;
}

const user: User = {
    name: "Amit",
    active: true
};

An interface can contain many properties.

interface Student {
    id: number;
    name: string;
    age: number;
    course: string;
    active: boolean;
}

const student: Student = {
    id: 101,
    name: "Amit",
    age: 20,
    course: "TypeScript",
    active: true
};

After creating an object, its properties can be accessed normally.

console.log(
    student.name
);

console.log(
    student.course
);

The interface provides type checking while using the object.

Properties can be changed if they are not readonly.

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

let student: Student = {
    name: "Amit",
    age: 20
};

student.name = "Rahul";
student.age = 21;

An interface can define an array property.

interface Student {
    name: string;
    marks: number[];
}

const student: Student = {
    name: "Amit",
    marks: [
        80,
        75,
        90
    ]
};

Interfaces can define arrays containing strings.

interface Developer {
    name: string;
    skills: string[];
}

const developer: Developer = {
    name: "Amit",
    skills: [
        "HTML",
        "CSS",
        "TypeScript"
    ]
};

Use ? to make an interface property optional.

interface User {
    name: string;
    email: string;
    phone?: string;
}

const user: User = {
    name: "Amit",
    email: "amit@example.com"
};

The phone property is optional.

The readonly keyword prevents a property from being reassigned after the object is created.

interface Student {
    readonly id: number;
    name: string;
}

const student: Student = {
    id: 101,
    name: "Amit"
};

student.name = "Rahul";

// student.id = 102;

Interfaces can describe nested objects.

interface Address {
    city: string;
    pin: number;
}

interface Student {
    name: string;
    address: Address;
}

const student: Student = {
    name: "Amit",
    address: {
        city: "Aurangabad",
        pin: 824101
    }
};

An interface can be used as a function parameter type.

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

function showStudent(
    student: Student
): void {

    console.log(
        student.name
    );

    console.log(
        student.age
    );
}

showStudent({
    name: "Amit",
    age: 20
});

A function can return an object that follows an interface.

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

function getStudent(): Student {

    return {
        name: "Rahul",
        age: 21
    };
}

const student = getStudent();

console.log(
    student.name
);

An interface can define a function as one of its properties.

interface User {
    name: string;

    greet: () => void;
}

const user: User = {

    name: "Amit",

    greet: () => {
        console.log("Hello");
    }

};

user.greet();

Interface methods can also accept parameters and return values.

interface Calculator {
    add: (
        a: number,
        b: number
    ) => number;
}

const calculator: Calculator = {

    add: (
        a,
        b
    ) => a + b

};

console.log(
    calculator.add(10, 20)
);

An interface can define the structure of each object inside an array.

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

const students: Student[] = [

    {
        name: "Amit",
        age: 20
    },

    {
        name: "Rahul",
        age: 21
    },

    {
        name: "Priya",
        age: 19
    }

];

console.log(
    students
);

An interface property can use a union type.

interface User {
    id: number | string;
    name: string;
}

const user: User = {
    id: 101,
    name: "Amit"
};

user.id = "USR101";

The id property can contain a number or string.

One interface can extend another interface using the extends keyword.

interface Person {
    name: string;
}

interface Student extends Person {
    age: number;
}

const student: Student = {
    name: "Amit",
    age: 20
};

The Student interface contains the properties from Person as well as its own properties.

An interface can extend multiple interfaces.

interface Person {
    name: string;
}

interface Employee {
    salary: number;
}

interface Manager
    extends Person, Employee {

    department: string;
}

const manager: Manager = {
    name: "Amit",
    salary: 50000,
    department: "IT"
};

Interfaces are commonly used to define React component props.

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

function UserCard(
    props: UserProps
) {

    return (
        <div>
            {props.name}
            {props.age}
        </div>
    );
}

This ensures that the component receives the expected props.

Interfaces are very useful in React Native for defining component props and application data.

interface User {
    id: number;
    name: string;
    email: string;
}

const user: User = {
    id: 101,
    name: "Rahul",
    email: "rahul@example.com"
};

Interfaces are useful for describing data received from APIs.

interface Product {
    id: number;
    title: string;
    price: number;
}

const product: Product = {
    id: 101,
    title: "Mobile Phone",
    price: 15000
};

console.log(
    product.title
);

TypeScript allows multiple declarations with the same interface name to be combined.

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = {
    name: "Amit",
    age: 20
};

The two declarations are merged into one interface.

A common mistake is forgetting a required property when creating an object.

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

const student: Student = {
    name: "Amit",
    age: 20
};

If a required property such as age is omitted, TypeScript reports a type error.

Interfaces are useful when:

• Defining the structure of objects.
• Defining React component props.
• Describing API responses.
• Creating reusable data structures.
• Extending existing object structures.
• Defining function properties.
• Working with React Native application data.

Here is a practical student management example using multiple interfaces.

interface Address {
    city: string;
    pin: number;
}

interface Student {
    id: number;
    name: string;
    age: number;
    course: string;
    marks: number[];
    address: Address;
}

const student: Student = {

    id: 101,

    name: "Amit",

    age: 20,

    course: "TypeScript",

    marks: [
        80,
        75,
        90
    ],

    address: {
        city: "Aurangabad",
        pin: 824101
    }

};

console.log(
    student.name
);

console.log(
    student.course
);

console.log(
    student.address.city
);

console.log(
    student.marks
);

Interfaces define the structure that objects should follow. They are one of the most useful TypeScript features for structured application data.

interface Student {
    id: number;
    name: string;
    course: string;
}

const student: Student = {
    id: 101,
    name: "Amit",
    course: "TypeScript"
};

Interfaces can contain properties, optional properties, readonly properties, functions, nested objects, and can extend other interfaces.