Interfaces

Interfaces in TypeScript define a contract that specifies the structure of an object. They are used to define custom types and enforce consistency and structure in your code.

To assign types to objects, such as a user object, you can use interfaces.

Example Interface:

interface User {
    firstName: string;
    lastName: string;
    email: string;
    age: number;
}

Example User Object:

const user: User = {
    firstName: "harkirat",
    lastName: "singh",
    email: "[email protected]",
    age: 21,
};

Assignment #1 - isLegal Function

Create a function isLegal that returns true or false if a user is above 18. It takes a user as an input.

Solution:

function isLegal(user: User): boolean {
    return user.age >= 18;
}

Assignment #2 - TodoList React Component

Create a React component that takes todos as an input and renders them.

Solution:

import React from "react";

interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

interface TodoListProps {
    todos: Todo[];
}

const TodoList: React.FC<TodoListProps> = ({ todos }) => {
    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>{todo.text}</li>
            ))}
        </ul>
    );
};

export default TodoList;

2. Implementing Interfaces

Interfaces in TypeScript can also be implemented by classes. This allows you to define a blueprint for objects with specific properties and methods.

Example Interface:

interface Person {
    name: string;
    age: number;
    greet(phrase: string): void;
}

Example Class Implementing the Interface:

class Employee implements Person {
    name: string;
    age: number;

    constructor(n: string, a: number) {
        this.name = n;
        this.age = a;
    }

    greet(phrase: string) {
        console.log(`${phrase} ${this.name}`);
    }
}

Implementing interfaces in classes provides structure and consistency, allowing you to create multiple variants of objects while ensuring they adhere to a common set of rules defined by the interface.

Summary

  • Interfaces are used to define the structure of objects and enforce consistency.

  • You can use interfaces to define custom types and assign them to objects.

  • Interfaces can also be implemented by classes, providing a blueprint for objects with specific properties and methods.

  • By using interfaces, you can improve the maintainability and readability of your code by clearly defining the shape of your data and the behavior of your objects.

Last updated

Was this helpful?