Enhanced interface with plugins

Question

Enhanced interface with plugins

I've been developing a "manager" class that allows for the integration of "plugins". Each plugin has the ability to enhance the data property of the manager class.

// manager.ts
interface Data {
    // some props
}

class Manager {
    data: Data;
    // TSC Problem: "Property 'data' has no initializer and is not definitely assigned in the constructor."

    constructor() {
        // It's not possible to set all potential properties of this.data because
        // the Manager class is unaware of all possible plugins that may be added
    }
}

Plugins receive a reference to the manager instance they are being plugged into. They can also enhance the Data interface to better define the data object?

// plugins/A.ts
interface Data {
    // additional props
}

function A(boss: Manager) {
    // "A" adds unique data to boss.data specific to "A"
}

These are the questions that come to mind:

Is this a sound design pattern?
Is this the best way to achieve this, or are there alternative solutions?

I came across information on Declaration Merging (https://www.typescriptlang.org/docs/handbook/declaration-merging.html), which seems like the most suitable option due to the number of independent plugins involved. Discriminated Unions (https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) might not be feasible in this scenario.

EDIT: To clarify my query; Can declaration merging be used across multiple files?

typescript interface static-typing

Answer 1

Answer №1

The reason for the error message is due to not assigning a value to the data property when it is declared as type Data. To resolve this, you can initialize the value through the constructor:

interface Data {
  title: string;
}

class Employee {
  public data: Data;

  constructor(data: Data) {
    this.data = data;
  }
}

Then, you can create instances like this:

const worker: Employee = new Employee({ title: "worker" });

Answer 2

The reason for the error message is due to not assigning a value to the data property when it is declared as type Data. To resolve this, you can initialize the value through the constructor:

interface Data {
  title: string;
}

class Employee {
  public data: Data;

  constructor(data: Data) {
    this.data = data;
  }
}

Then, you can create instances like this:

const worker: Employee = new Employee({ title: "worker" });

Answer 3

Answer №2

After some experimentation, I finally cracked the code.

// Manager.ts
interface Data {
    // potentially includes some properties
}

class Manager {
    data: Data;
    // Typescript Error: "Property 'data' has no initializer and is not definitely assigned in the constructor."

    constructor() {
        // Unable to assign all possible properties to this.data because the Manager class does not have prior knowledge
    }
}

// plugins/A.ts
declare module "../Manager" {
  interface Data {
    Scale: number;
  }
}

function A(boss: Manager) {
    // "A" appends unique data to boss.data that pertains specifically to "A"
}

Answer 4

After some experimentation, I finally cracked the code.

// Manager.ts
interface Data {
    // potentially includes some properties
}

class Manager {
    data: Data;
    // Typescript Error: "Property 'data' has no initializer and is not definitely assigned in the constructor."

    constructor() {
        // Unable to assign all possible properties to this.data because the Manager class does not have prior knowledge
    }
}

// plugins/A.ts
declare module "../Manager" {
  interface Data {
    Scale: number;
  }
}

function A(boss: Manager) {
    // "A" appends unique data to boss.data that pertains specifically to "A"
}

Enhanced interface with plugins

Answer №1

Answer №2

Similar questions

How can I incorporate multiple quality sources into a flowplayer using Angular?

The CoreUI Sidebar gracefully hovers over the main page content

Error in GoogleMapReact with Next.js: TypeError occurs when trying to read properties of undefined, specifically 'getChildren'

The inRequestScope feature seems to be malfunctioning and is not functioning as intended

I am looking to generate an array with key-value pairs from an object that will be seen in the examination

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

Can you explain the distinction between these two TypeScript classes, one with a constructor and one without?

Remove user from authentication in Supabase in case of unsuccessful user creation in the database when signing up

In Angular, encountering difficulty accessing object members within an array when using custom pipes

Typescript error: Cannot assign type to argument

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

Instructions on utilizing type interfaces for prop drilling in my React Typescript counter

Seamless Navigation with Bootstrap Navbar and SmoothScroll

Troubleshooting Typescript Compilation Error in React - Cannot assign type 'Element' to type 'FunctionComponent<{}>'

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

encountered an issue when testing a dynamic route in Next.js with postman

Data from HTML not being transferred by Angular Forms

What is the best way to display loading details during a data loading process within a useEffect hook?

Is it possible to compile using Angular sources while in Ivy's partial compilation mode?

Tips for formatting a Date field within an Angular application