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

What is the process for performing interpolation in Angular version 8?

I'm interested in developing a feature that monitors a specific attribute and triggers a function once that attribute hits the value of 100

How can Angular components that are not directly related subscribe to and receive changes using a declarative approach?

Verify whether a component is a React.ReactElement<any> instance within a child mapping operation

Angular: Generating a fresh instance of an object monthly

Error: Module not found '!raw-loader!@types/lodash/common/array.d.ts' or its type declarations are missing

Exporting a class from an index.ts file may result in a problem where the injected constructor is

Angular: Issue with subscribed variable visibility on screen

Inheritance from WebElement in WebdriverIO: A Beginner's Guide

Typescript fails to identify the parameter type of callbacks

Getting event properties in a React component using the rest operator: A comprehensive guide

Simplify a function by lowering its cyclomatic complexity

Create a full type by combining intersecting types

create an instance of the class provided as an argument

Having trouble getting anime.js to function properly in an Ionic 3 project?

Identify all the CHECKBOX elements that are visible and not concealed

I'm facing an issue with SSRProvider in my NextJs application

The issue arises when attempting to invoke a method from a global mixin in a Vue3 TypeScript component

Is there any advice for resolving the issue "In order to execute the serve command, you must be in an Angular project, but the project definition cannot be located"?

Looking for a solution to the error message: "X is not able to be assigned to the type 'IntrinsicAttributes & Props'"