List out all the classes that implement an interface in Typescript

Question

List out all the classes that implement an interface in Typescript

Greetings to all TypeScript enthusiasts!

Here's a challenge I want to tackle: I aim to establish an interface -- let's name it IShape -- and define several classes (Rectangle, Circle, Triangle) that adhere to the IShape interface.

Let's say that IShape includes a method called GetName which provides a string representing the shape's name. For now, let's assume that each class implementing GetName returns a static string (e.g.: "Rectangle", "Round object", "Pointed figure"). Additionally, let's envision that IShape incorporates the Draw method.

During runtime, my objective is to compile and display a list of all classes that implement IShape, thereby allowing users to select a shape from a drop-down menu. Upon selection, the system should invoke the selected shape's Draw method.

However, here's the twist: in the future, I wish to introduce new classes that conform to the IShape interface (let's call them Square and Oval). The next time I execute the code, these new classes should automatically appear in the drop-down menu without requiring extensive modifications to the existing code base.

How can this be achieved in TypeScript?

The ultimate goal is to create a flexible system that empowers team members to expand upon my code by introducing new shapes that adhere to the established interface, eliminating the need for a hardcoded list of accepted shapes.

I appreciate any assistance you can provide. Thank you.

typescript

Answer 1

Answer №1

In my approach to coding this, I will outline the steps I would take while acknowledging that it is based on personal preferences, which may not align with yours.

Firstly, I utilize standard ES6 import and export. All my shape classes reside in a single folder within my codebase along with an index.ts file that handles exports for the entire directory. This results in a structure similar to:

|-- src/
|    |-- shapes/
|    |    |-- index.ts
|    |    |-- IShape.ts
|    |    |-- Rectangle.ts
|    |    |-- Circle.ts
|    |    |-- Triangle.ts
|    |
|    |-- ShapeList.ts

The content of IShape.ts typically looks like:

export interface IShape {
  draw(): void;
}

Within Rectangle.ts, Circle.ts, Triangle.ts, you can find code such as:

import { IShape } from './IShape';

export class Circle implements IShape {
  static getName: () => 'Circle';
  draw(): void {
    //...
  }
}

In index.ts, I import the individual shape classes and export them as an array:

import { Circle } from './Circle';
import { Rectangle } from './Rectangle';
import { Triangle } from './Triangle';

export default [
  Circle,
  Rectangle,
  Triangle,
];

Lastly, in ShapeList.ts, I simply make use of the exported shapes to create my ShapeList:

import shapes from './shapes';

export class ShapeList {
  getItems() {
    return shapes.map(shape => ({
      label: shape.getName(),
      action: () => new shape(), // Simple factory method for creation when selected
    }));
  }

  // ... Rest of the class
}

This configuration helps streamline the process of adding new shapes:

Write the code for the new shape class
Ensure proper exporting

Answer 2

In my approach to coding this, I will outline the steps I would take while acknowledging that it is based on personal preferences, which may not align with yours.

Firstly, I utilize standard ES6 import and export. All my shape classes reside in a single folder within my codebase along with an index.ts file that handles exports for the entire directory. This results in a structure similar to:

|-- src/
|    |-- shapes/
|    |    |-- index.ts
|    |    |-- IShape.ts
|    |    |-- Rectangle.ts
|    |    |-- Circle.ts
|    |    |-- Triangle.ts
|    |
|    |-- ShapeList.ts

The content of IShape.ts typically looks like:

export interface IShape {
  draw(): void;
}

Within Rectangle.ts, Circle.ts, Triangle.ts, you can find code such as:

import { IShape } from './IShape';

export class Circle implements IShape {
  static getName: () => 'Circle';
  draw(): void {
    //...
  }
}

In index.ts, I import the individual shape classes and export them as an array:

import { Circle } from './Circle';
import { Rectangle } from './Rectangle';
import { Triangle } from './Triangle';

export default [
  Circle,
  Rectangle,
  Triangle,
];

Lastly, in ShapeList.ts, I simply make use of the exported shapes to create my ShapeList:

import shapes from './shapes';

export class ShapeList {
  getItems() {
    return shapes.map(shape => ({
      label: shape.getName(),
      action: () => new shape(), // Simple factory method for creation when selected
    }));
  }

  // ... Rest of the class
}

This configuration helps streamline the process of adding new shapes:

Write the code for the new shape class
Ensure proper exporting

List out all the classes that implement an interface in Typescript

Answer №1

Similar questions

In TypeScript, an interface property necessitates another property to be valid

A guide on updating a MySQL table using a JSON object in Node.js

Issue: The --outFile flag only supports 'amd' and 'system' modules

Angular displays X items in each row and column

Guide on transferring the token and user information from the backend to the front-end

Ways to verify if the current date exists within a TypeScript date array

The process of removing and appending a child element using WebDriverIO

Creating a function that is accessible to the entire module

What is the best way to incorporate CSS from node_modules into Vite for production?

Issues arise when trying to type ChangeEvent in React using Typescript

Changing background color during drag and drop in Angular 2: A step-by-step guide

My Weaviate JavaScript client is not returning anything when I use the ".withAsk" function. What could be the issue?

Experiencing difficulty creating query files for the apollo-graphql client

Error Alert: Next.js TypeScript is reporting that the necessary packages are missing from your setup

Leveraging the power of NestJS in conjunction with Apollo Server version 2

typescript set parameter conditionally within a function

Extending Error object disrupts `instanceof` validation in TypeScript

javascript identify dissimilarities within arrays

Easy steps to bring in type definitions from an npm package using Vite

Sorting elements in an array based on an 'in' condition in TypeScript