Interface Properties in TypeScript

Interface properties describe the fields that an object should contain.

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

Here, name and age are interface properties.

The basic syntax of an interface property is:

propertyName: type;

Example:

interface User {
    name: string;
}

A property can be declared as a string.

interface User {
    name: string;
}

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

The name property must contain a string.

A property can contain a number.

interface Student {
    age: number;
}

const student: Student = {
    age: 20
};

Boolean properties accept true or false.

interface User {
    active: boolean;
}

const user: User = {
    active: true
};

An interface can contain multiple properties.

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

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

Interface properties are accessed using dot notation.

console.log(
    student.name
);

console.log(
    student.age
);

console.log(
    student.course
);

Normal interface properties can be changed after the object is created.

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

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

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

An interface property can be an array.

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

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

An interface can contain an array of strings.

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

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

Use the question mark ? to make a property optional.

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

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

The phone property is not required.

Required properties must be provided, while optional properties may be omitted.

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

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

The readonly keyword prevents a property from being reassigned.

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

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

student.name = "Rahul";

// student.id = 102;

An interface property can accept more than one type using a union.

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

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

user.id = "USR101";

A property can be restricted to specific literal values.

interface User {
    name: string;
    role: "admin" | "student";
}

const user: User = {
    name: "Amit",
    role: "student"
};

The role property can only contain the specified values.

An interface property can itself be another object.

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

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

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

A nested object can also be written directly inside the interface.

interface Student {
    name: string;

    address: {
        city: string;
        pin: number;
    };
}

const student: Student = {
    name: "Rahul",
    address: {
        city: "Patna",
        pin: 800001
    }
};

Interface properties can use built-in types such as Date.

interface Student {
    name: string;
    admissionDate: Date;
}

const student: Student = {
    name: "Amit",
    admissionDate: new Date()
};

An interface property can be a function.

interface User {
    name: string;

    greet: () => void;
}

const user: User = {
    name: "Amit",

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

user.greet();

Function properties can 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)
);

A property can be an array containing values from more than one type.

interface Data {
    values: (string | number)[];
}

const data: Data = {
    values: [
        "Amit",
        100,
        "Rahul",
        200
    ]
};

A property can also use a tuple type.

interface Student {
    name: string;
    result: [number, string];
}

const student: Student = {
    name: "Amit",
    result: [
        85,
        "Pass"
    ]
};

The tuple contains a number followed by a string.

Interface properties are commonly used to define React component props.

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

function UserCard(
    props: UserProps
) {

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

Each prop has a clearly defined type.

React Native components can use interfaces to define their props.

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

const UserCard = (
    props: UserProps
) => {

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

Interfaces are useful for describing the properties expected from an API response.

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

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

An interface can inherit properties from another interface.

interface Person {
    name: string;
}

interface Student extends Person {
    age: number;
    course: string;
}

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

The Student interface contains all properties from Person.

A common mistake is assigning a value with the wrong type.

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

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

// Incorrect:
// student.age = "Twenty";

The age property is declared as a number, so a string cannot be assigned to it.

All required interface properties must be provided when creating an object.

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

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

If age is required, it cannot simply be omitted. Make it optional with age? if it is not always needed.

This example combines several interface property types in a student object.

interface Student {
    readonly id: number;
    name: string;
    age: number;
    course: string;
    marks: number[];
    phone?: string;

    address: {
        city: string;
        pin: number;
    };
}

const student: Student = {

    id: 101,

    name: "Amit",

    age: 20,

    course: "TypeScript",

    marks: [
        80,
        75,
        90
    ],

    phone: "9876543210",

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

};

console.log(
    student.name
);

console.log(
    student.marks
);

console.log(
    student.address.city
);

Interface properties define the structure and types of data that an object should contain.

interface Student {
    readonly id: number;
    name: string;
    age: number;
    course: string;
    marks: number[];
    phone?: string;
}

Properties can be required, optional, readonly, nested, arrays, functions, unions, tuples, and many other types.