Interface in TypeScript

Interface in TypeScript: An Overview

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.

Interface Declaration

Syntax

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

Example of Interface

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

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 expected
const plane = { fly: () => console.log("Zoom!"); };
launch(plane); // Also works, even though plane isn't a Bird!

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 interface
const result = add(5, 3); // Works as expected, result is 8
function 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

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)

Read-only Properties in Interfaces

TypeScript interfaces can declare properties as "read-only" by using the readonly 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" });

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 name
const 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

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)

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."

Extending Interfaces in TypeScript

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 Person
console.log(john.work()); // Uses method specific to Employee

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 interface
function 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' function
console.log(result); // Prints 8 (5 + 3)

Take our free typescript skill challenge to evaluate your skill

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET CHALLENGE