Interface in TypeScript :Explained

What is an Interface in Typescript?

Why use Interfaces?

• Type checks for objects: Ensures data structure consistency and detects mistakes early.
• Clarity of code: Improves comprehension of desired object behavior.
• Function parameter/return types: These define the function's expected input and output.
• Code reuse and abstraction: Allows for code reuse by using interchangeable objects that adhere to the interface.
• Decoupling and flexibility: Encourages loose coupling and flexible object implementation.

TypeScript Interfaces Syntax

Syntax

interface <interface_name> {
 // Properties (required & optional)
 property1: type1;
 property2?: type2; // Methods (no implementation)
 method1(param1: type3, param2: type4): type5;
 method2?(param6?: type6): void;
}

Breakdown of the syntax variables:

• Interface: A keyword used to describe an interface name.
• interface_name: The interface's name, as defined by the TypeScript naming standard.
• Property 1 and Property 2 are interface properties.
• type: A TypeScript type annotation indicating the type of each property.

Example of Interface

interface Person { name: string; age: number;}const employee: Person = { name: "John Doe", age: 30,};

Use Cases of TypeScript Interfaces

1. How to Define Object Structures

TypeScript interfaces allow you to define the shape of an object by specifying its properties and types.

Example:

interface User {
    name: string;
    age: number;
    email: string;
}
const user: User = {
    name: "Alice",
    age: 30,
    email: "alice@example.com",
};   

This ensures that any object assigned to the User type must include the defined properties with the correct types.

2. How to Type-Check Function Parameters

You can use interfaces to type-check the parameters of a function, ensuring that the arguments passed match the expected structure.

Example:

interface Point {
    x: number;
    y: number;
}
function printPoint(point: Point) {
    console.log(`X: ${point.x}, Y: ${point.y}`);
}
printPoint({ x: 10, y: 20 }); // Type-checked against the Point interface

This guarantees that only objects matching the Point interface can be passed to printPoint().

3. How to Implement Class Contracts

Interfaces can define the structure that a class must adhere to, ensuring consistent behavior across implementations.

Example:

interface Animal {
    name: string;
    speak(): void;
}

class Dog implements Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} barks`);
    }
} 

The Dog class must implement both the name property and the speak() method as specified by the Animal interface, enforcing a contract.

4. Duck Typing/Structural Subtyping in TypeScript

Example of Duck Typing/Structural Subtyping in TypeScript

interface Flyer {
 fly(): void;
}function launch(flyer: Flyer) {
 flyer.fly(); // Works with any object implementing the "fly" method
}class Bird implements Flyer {
 fly() {
  console.log("Flap, flap!");
 }
}launch(new Bird()); // Works as expectedconst plane = { fly: () => console.log("Zoom!"); };
launch(plane); // Also works, even though plane isn't a Bird!

5. Function Interfaces in TypeScript

Example of Function Interfaces in TypeScript

interface MathOperation {
 (a: number, b: number): number; // Type signature for a function taking two numbers and returning a number
}const add: MathOperation = (a, b) => a + b; // Function implementing the MathOperation interface
const multiply: MathOperation = (a, b) => a * b; // Another function adhering to the interfaceconst result = add(5, 3); // Works as expected, result is 8function performOperation(op: MathOperation, x: number, y: number) {
 return op(x, y); // Function accepting any function conforming to the MathOperation interface
}const product = performOperation(multiply, 2, 4); // Uses multiply function with performOperation

6. Optional Properties in Interfaces

Example of Optional Properties in Interfaces

interface User {
 name: string; // Required property
 age?: number; // Optional property
 bio?: string; // Another optional property
}const user1: User = { name: "Alice", age: 30 }; // Fulfills both required and optional properties
const user2: User = { name: "Bob" }; // Fulfills only the required property (age and bio omitted)function displayUserInfo(user: User) {
 console.log(`Name: ${user.name}`);
 if (user.age) console.log(`Age: ${user.age}`); // Safe check for optional property
 if (user.bio) console.log(`Bio: ${user.bio}`); // Additional check for another optional property
}displayUserInfo(user1); // Prints both name and age
displayUserInfo(user2); // Prints only name (age and bio not accessed)

7. Read-only Properties in Interfaces

TypeScript interfaces can declare properties as "read-only" by using the read-only keyword, which assures that their values cannot be directly updated after the assignment.

Example of Read-only Properties in Interfaces

interface Product { readonly id: string; // Read-only property (cannot be changed) name: string; // Regular property (can be updated) price: number; // Regular property}const shirt: Product = { id: "ABC123", name: "T-shirt", price: 20 };// Can update regular properties:shirt.name = "Polo shirt";shirt.price = 25;// Cannot directly modify read-only property:// Uncaught TypeError: Cannot assign to read-only property 'id' of object '#<Object>'shirt.id = "XYZ456"; // Raises error// Allowed only through mutating the entire object:const newShirt = Object.assign({}, shirt, { id: "XYZ456" });

8. Indexable Properties in Interfaces

Example of Indexable Properties in Interfaces

interface StringMap { [key: string]: number; // Allows any string key with a number value}const employeeData: StringMap = { name: "Jane Doe", age: 30, salary: 50000,};const employeeName = employeeData["name"]; // Accessing data by string key// You can also use string literals or dynamic keys:const age = employeeData.age; // Accessing data by property nameconst bonusKey = "performanceBonus";employeeData[bonusKey] = 1000; // Adding a new key-value pair with dynamic key// TypeScript type safety ensures key types and values match the interface definition

9. Defining Function Types in Interfaces

Example of Defining Function Types in Interfaces

interface MathOperation {
 add(a: number, b: number): number; // Function signature for 'add' with two number params and a number return
 multiply?: (a: number, b: number) => number; // Optional function signature for 'multiply' with same types
}const calculator: MathOperation = {
 add(a, b) { return a + b; },
 // No need to define 'multiply' explicitly as it's optional
};const sum = calculator.add(5, 3); // Works as expected (5 + 3 = 8)// Define 'multiply' later if needed:
calculator.multiply = (a, b) => a * b;const product = calculator.multiply(2, 4); // Now works too (2 * 4 = 8)

10. Using Interfaces with Classes in TypeScript

Example of using Interfaces with Classes

interface Person { name: string; age: number; greet(): string; // Method signature with no arguments and string return type}class Employee implements Person { name: string; age: number; department: string; // Additional property not defined in the interface constructor(name: string, age: number, department: string) {  this.name = name;  this.age = age;  this.department = department; } greet(): string {  return `Hello, my name is ${this.name} and I work in the ${this.department} department.`; }}const john = new Employee("John Doe", 30, "Engineering");console.log(john.greet()); // Prints "Hello, my name is John Doe and I work in the Engineering department."

11. How to Extend Interfaces?

Example of Extending Interfaces in TypeScript

interface Person { name: string; age: number;}interface Employee extends Person { department: string; work(): string; // Additional method specific to Employee}const john: Employee = { name: "John Doe", age: 30, department: "Engineering", work() {  return "I'm coding in TypeScript!"; }};console.log(john.name); // Accesses inherited property from Personconsole.log(john.work()); // Uses method specific to Employee

12. How are type aliases different from interfaces in typescript?

interface Calculator {
sum(a: number, b: number): number; // Function to add two numbers
currentResult: number; // Property to store the current result
}
function createCalculator(): Calculator {
return {
sum(a, b) {
this.currentResult = a + b;
return this.currentResult;
},
currentResult: 0,
};
}
const calc = createCalculator();
const sumResult = calc.sum(5, 3); // Calling the "sum" function (5 + 3 = 8)
console.log(calc.currentResult); // Accessing the updated "currentResult" property (8)

interface Pair<T, U> { // `T` and `U` are type placeholders
first: T;
second: U;
}
const stringPair: Pair<string, string> = { first: "Hello", second: "World" }; // Specific usage with two strings
const numberPair: Pair<number, boolean> = { first: 3, second: true }; // Different types used
function swap<T, U>(pair: Pair<T, U>): Pair<U, T> { // Generic function using same interface
return { first: pair.second, second: pair.first };
}
const swappedPair = swap(stringPair); // Swaps types, resulting in { first: "World", second: "Hello" }

interface MathOperation { (a: number, b: number): number; // Function signature, defines two number params and a number return
}const add: MathOperation = (a, b) => a + b; // Function adhering to the interface
const multiply: MathOperation = (a, b) => a * b; // Another function conforming to the interfacefunction performOperation(op: MathOperation, x: number, y: number) {
 return op(x, y); // Function accepting any function matching the MathOperation interface
}const result = performOperation(add, 5, 3); // Uses 'add' functionconsole.log(result); // Prints 8 (5 + 3)