Interfaces In Depth

Author: HuXn-WebDev

9. Interfaces/1. Interface.ts

@@ -0,0 +1,36 @@
+// Interface definition
+interface Computer {
+  name: string;
+  ram: number;
+  hdd: number;
+}
+
+// Usage
+const computerExample: Computer = {
+  name: "i7",
+  ram: 16,
+  hdd: 23000,
+};
+
+console.log(computerExample.name);
+console.log(computerExample.ram);
+console.log(computerExample.hdd);
+// ---------------------------
+
+// ----------------------------------
+// Interface #1 (Simple Interface)
+interface Movie {
+  readonly name: string; // 👈 Readonly Property
+  ratings: number;
+  genra?: string; // 👈 Optional Property
+}
+
+const movie1: Movie = {
+  name: "John Wick",
+  ratings: 7,
+  genra: "Action",
+};
+
+// movie1.name = "Another Movie" // 👈 ERROR
+console.log(movie1);
+// ----------------------------------

9. Interfaces/2. Interface for function.ts

@@ -0,0 +1,41 @@
+// ---------------------------
+// Example 1
+
+// Interface for a function
+interface MathOperation {
+  (x: number, y: number): number;
+}
+
+// Usage
+const add: MathOperation = (a, b) => a + b;
+const subtract: MathOperation = (a, b) => a - b;
+
+console.log(add(5, 3));
+console.log(subtract(7, 2));
+// ---------------------------
+
+// ---------------------------
+// Example 2
+
+// Define an interface for a Car
+interface Car {
+  brand: string;
+  model: string;
+  year: number;
+}
+
+// Function that accepts an object adhering to the Car interface
+function displayCarInfo(car: Car): void {
+  console.log(`Brand: ${car.brand}, Model: ${car.model}, Year: ${car.year}`);
+}
+
+// Create an object that adheres to the Car interface
+const myCar: Car = {
+  brand: "Toyota",
+  model: "Camry",
+  year: 2022,
+};
+
+// Call the function with the object
+displayCarInfo(myCar);
+// ---------------------------

9. Interfaces/3. Interface with method.ts

@@ -0,0 +1,52 @@
+// Interface with method
+interface Person {
+  firstName: string;
+  lastName: string;
+  age: number;
+  sayHello(): void;
+}
+
+function greet(person: Person) {
+  console.log(`Hello, ${person.firstName} ${person.lastName}!`);
+  person.sayHello();
+}
+
+const john: Person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 30,
+  sayHello() {
+    console.log("Hi there!");
+  },
+};
+
+const huxn: Person = {
+  firstName: "HuXn",
+  lastName: "WebDev",
+  age: 18,
+  sayHello() {
+    console.log("What's good");
+  },
+};
+
+greet(john);
+greet(huxn);
+
+// ----------------------------------
+// Interface #3 (Interface with method properties)
+interface Song {
+  songName: string;
+  singerName?: string;
+  printSongInfo(songName: string, singerName: string): string;
+}
+
+const song1: Song = {
+  songName: "Natural",
+  singerName: "Imagin Drigon",
+  printSongInfo: (songName, singerName) => {
+    return `Song: (${songName}) Singer: (${singerName})`;
+  },
+};
+
+console.log(song1.printSongInfo("Natural", "Imagin Drigon"));
+// ---------------------------

9. Interfaces/4. Extending Interface.ts

@@ -0,0 +1,22 @@
+// Interface #5 (Extending Interface)
+interface MovieDetails {
+  readonly name: string;
+  ratings: number;
+  printMovieInfo(name: string, price: number, ratings: number): string | number;
+}
+
+interface MovieGenra extends MovieDetails {
+  genra: string;
+}
+
+const movie1: MovieGenra = {
+  name: "John Wick",
+  ratings: 7,
+  printMovieInfo(name: string, price: number, ratings: number) {
+    return `Name: ${name}, Price: ${price}, Ratings: ${ratings}`;
+  },
+  genra: "Action",
+};
+
+const res = movie1.printMovieInfo("John Wick", 100, 8);
+console.log(res);

9. Interfaces/5. Interface for classes.ts

@@ -0,0 +1,21 @@
+// Interface for a class
+interface Vehicle {
+  start(): void;
+  stop(): void;
+}
+
+// Class implementing the interface
+class Car implements Vehicle {
+  start() {
+    console.log("Car started");
+  }
+
+  stop() {
+    console.log("Car stopped");
+  }
+}
+
+// Usage
+const myCar = new Car();
+myCar.start();
+myCar.stop();

9. Interfaces/6. interface extension.ts

@@ -0,0 +1,49 @@
+// Original interface
+interface Car {
+  brand: string;
+  start(): void;
+}
+
+// Declaration merging (interface extension)
+interface Car {
+  model: string;
+  stop(): void;
+}
+
+// Usage of the extended interface
+const myCar: Car = {
+  brand: "Toyota",
+  model: "Camry",
+  start() {
+    console.log("Car started");
+  },
+  stop() {
+    console.log("Car stopped");
+  },
+};
+
+// ------------------------------------
+interface User {
+  firstName: string;
+  lastName: string;
+  age: number;
+}
+
+interface User {
+  printUserInfo(
+    firstName: string,
+    lastName: string,
+    age: number
+  ): string | number;
+}
+
+const huxn: User = {
+  firstName: "HuXn",
+  lastName: "WebDev",
+  age: 18,
+  printUserInfo(firstName, lastName, age) {
+    return `Name: (${firstName} ${lastName}) Age: (${age})`;
+  },
+};
+
+console.log(huxn.printUserInfo("HuXn", "WebDev", 18));

9. Interfaces/README.md

@@ -0,0 +1,60 @@
+# Interface
+
+In TypeScript, an interface is a way to define a contract for a specific shape of an object. It defines the properties and methods that an object should have in order to be considered compatible with that interface.
+
+To create an interface, you use the interface keyword followed by the name of the interface and the properties and methods it should contain, like this:
+
+```ts
+interface Person {
+  firstName: string;
+  lastName: string;
+  age: number;
+  sayHello(): void;
+}
+```
+
+In this example, we're defining an interface called Person that requires any object implementing it to have firstName, lastName, and age properties that are of type string, string, and number, respectively. It also requires an object implementing the Person interface to have a method called sayHello that takes no arguments and returns nothing (void).
+
+You can then use this interface to check if an object matches its shape, like this:
+
+```ts
+function greet(person: Person) {
+  console.log(`Hello, ${person.firstName} ${person.lastName}!`);
+  person.sayHello();
+}
+
+const john: Person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 30,
+  sayHello() {
+    console.log("Hi there!");
+  },
+};
+
+greet(john);
+```
+
+In this example, we're defining a function called greet that takes a Person object as its argument and logs a greeting message using its firstName and lastName properties. We're also calling the sayHello method on the Person object.
+
+Then, we're creating a john object that implements the Person interface and passing it to the greet function. Since john matches the shape of the Person interface, the code runs without any errors.
+
+Interfaces are a powerful tool in TypeScript that allow you to enforce type safety and make your code more maintainable and readable.
+
+# Extending Interfaces
+
+You can use the extends keyword to extend an interface. Here's an example:
+
+```ts
+interface Animal {
+  name: string;
+}
+
+interface Dog extends Animal {
+  breed: string;
+}
+```
+
+In this example, we have an Animal interface with a name property. We then create a new Dog interface that extends the Animal interface using the extends keyword. The Dog interface adds a breed property to the base Animal interface.
+
+When you extend an interface, the new interface inherits all the properties and methods of the base interface, and you can also add new properties or methods to the new interface.