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: "[e-mail]",
    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.