Interface vs Type in TypeScript

An interface describes the structure of an object.

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

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

A type alias gives a name to a type.

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

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

Both can describe object structures.

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

Using a type alias:

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

Both definitions describe an object with name and age.

Interfaces are created using the interface keyword.

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

Type aliases are created using the type keyword.

type Product = {
    id: number;
    name: string;
    price: number;
};

One interface can extend another interface using extends.

interface Person {
    name: string;
}

interface Student extends Person {
    age: number;
}

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

Type aliases can combine object types using the intersection operator &.

type Person = {
    name: string;
};

type Student = Person & {
    age: number;
};

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

An interface can extend multiple interfaces.

interface Person {
    name: string;
}

interface Contact {
    phone: string;
}

interface Student
    extends Person, Contact {

    age: number;
}

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

Multiple types can be combined using intersection types.

type Person = {
    name: string;
};

type Contact = {
    phone: string;
};

type Student =
    Person &
    Contact & {
        age: number;
    };

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

An interface declaration can be written more than once. TypeScript combines the declarations.

interface User {
    name: string;
}

interface User {
    age: number;
}

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

This behavior is called declaration merging.

A type alias cannot be declared again with the same name in the same scope.

type User = {
    name: string;
};

// Cannot declare another User
// type User = {
//     age: number;
// };

For extending type aliases, use intersections or create another type based on the existing one.

Type aliases are very useful for creating union types.

type Status =
    "pending" |
    "approved" |
    "rejected";

let status: Status =
    "pending";

The value must be one of the specified options.

Interfaces directly describe object structures, while union combinations are commonly expressed using type aliases.

interface Admin {
    name: string;
    role: "admin";
}

interface Student {
    name: string;
    role: "student";
}

type User =
    Admin | Student;

Type aliases are convenient for naming tuple types.

type StudentResult =
    [number, string];

const result: StudentResult = [
    85,
    "Pass"
];

Interfaces can describe objects containing functions.

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

const calculator: Calculator = {
    add: (a, b) => a + b
};

A type alias can directly represent a function type.

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

const add: AddFunction =
    (a, b) => a + b;

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

Interfaces can contain optional properties using ?.

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

const user: User = {
    name: "Amit"
};

Type aliases can also contain optional properties.

type User = {
    name: string;
    phone?: string;
};

const user: User = {
    name: "Amit"
};

Both interfaces and object type aliases support optional properties.

Interfaces support readonly properties.

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

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

// student.id = 102; // Error

Type aliases can also define readonly properties.

type Student = {
    readonly id: number;
    name: string;
};

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

// student.id = 102; // Error

Interfaces can be generic.

interface Box<T> {
    value: T;
}

const numberBox: Box<number> = {
    value: 100
};

const stringBox: Box<string> = {
    value: "Hello"
};

Type aliases can also be generic.

type Box<T> = {
    value: T;
};

const numberBox: Box<number> = {
    value: 100
};

const stringBox: Box<string> = {
    value: "Hello"
};

Interfaces are commonly used to describe React component props.

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

function UserCard(
    props: UserProps
) {
    return (
        <div>
            <h3>{props.name}</h3>
            <p>{props.age}</p>
        </div>
    );
}

A type alias can also describe React component props.

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

function UserCard(
    props: UserProps
) {
    return (
        <div>
            <h3>{props.name}</h3>
            <p>{props.age}</p>
        </div>
    );
}

Both can be used to describe React Native component props.

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

const UserCard = (
    props: UserProps
) => {

    return (
        <View>
            <Text>
                {props.name}
            </Text>
        </View>
    );
};

The same structure could also be written using a type alias.

An interface is convenient when you are mainly describing object structures and want to extend or merge those structures.

interface Person {
    name: string;
}

interface Student extends Person {
    course: string;
}

This style is easy to read when building related object models.

A type alias is especially useful when you need unions, intersections, tuples, primitive aliases, or function types.

type ID =
    number | string;

type Status =
    "pending" |
    "approved" |
    "rejected";

type Point =
    [number, number];

The following example shows the same student structure using both an interface and a type alias.

interface StudentInterface {
    readonly id: number;
    name: string;
    course: string;
    age?: number;
}

type StudentType = {
    readonly id: number;
    name: string;
    course: string;
    age?: number;
};

const student1: StudentInterface = {
    id: 101,
    name: "Amit",
    course: "TypeScript",
    age: 20
};

const student2: StudentType = {
    id: 102,
    name: "Rahul",
    course: "React Native"
};

console.log(
    student1.name
);

console.log(
    student2.name
);

Both interfaces and type aliases are powerful tools for describing data in TypeScript.

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

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

Interfaces are particularly useful for object structures, extension, and declaration merging. Type aliases are useful when working with unions, intersections, tuples, and other type combinations.