What is the most effective approach for annotating TypeScript abstract classes that are dynamically loaded?

Question

What is the most effective approach for annotating TypeScript abstract classes that are dynamically loaded?

I am in the process of developing a library that allows for the integration of external implementations, and I am exploring the optimal approach to defining types for these implementations.

Illustration

abstract class Creature {
    public abstract makeNoises();
}

class Lion extends Creature {
    public makeNoises() {
        console.log('roar');
    }
}

class Elephant extends Creature {
    public makeNoises() {
        console.log('trumpet');
    }
}

type BuiltInCreatures = 'lion' | 'elephant';

interface CreatureLike {
    [name: string]: new () => Creature;
}

default class SafariClient {
    public starCreature: Creature;
    constructor(someCreature: BuiltInCreatures | CreatureLike) {
        if (typeof someCreature === 'string') {
            // load `Lion` for 'lion', or `Elephant` for 'elephant'.
            // this.starCreature = new Lion() or new Elephant();
        } else {
           // integrate external creature plugin
           // this.starCreature = new [someCreature]();
        }
    }

    public makeNoises() {
        this.starCreature.makeNoises();
    }
}

I intend to offer predefined classes that can be easily utilized, while also allowing users to introduce their own custom classes. How can I achieve this?

const safari = new SafariClient('lion');
// or
const safari = new SafariClient(new Giraffe()); // Or maybe `new SafariClient(Giraffe)`?

I am specifically interested in finding an elegant solution that provides clear options to users of SafariClient - the type system should indicate that they can use either a string (BuiltInCreature) or a custom implementation of Creature.

javascript typescript types abstract-class

Answer 1

Answer №1

Just a quick note, at the moment your Cat and Dog types are identical in structure. This means that the compiler cannot differentiate between them. While this may not cause any issues, it can lead to unexpected outcomes (such as IntelliSense indicating that a Dog is actually a Cat). To avoid unintentional equivalence between types in my code examples, I prefer to do the following:

class Dog extends Animal {
  chaseCars() {}
  public makeSounds() {
    console.log("woof");
  }
}

class Cat extends Animal {
  chaseMice() {}
  public makeSounds() {
    console.log("meow");
  }
}

By structurally differentiating between a Cat and a Dog (one chases mice while the other chases cars) along with their unique names, everything falls into place.

My suggestion would be to create a registry of predefined Animal constructors:

const builtInAnimals = {
  cat: Cat,
  dog: Dog
};

And define an associated type:

type BuiltInAnimals = typeof builtInAnimals;

This allows for the implementation of your ZooClient class as follows:

class ZooClient {
  public mostFamousAnimal: Animal;
  constructor(someAnimal: keyof BuiltInAnimals | (new () => Animal)) {
    const animalConstructor =
      typeof someAnimal === "string" ? builtInAnimals[someAnimal] : someAnimal;
    this.mostFamousAnimal = new animalConstructor();
  }

  public makeSounds() {
    this.mostFamousAnimal.makeSounds();
  }
}

The constructor now accepts either a keyof BuiltInAnimals (in this case, either "cat" or "dog") or a constructor returning an Animal. The animalConstructor variable makes use of a typeof type guard to determine the type of someAnimal, ensuring it is set as new() => Animal. The constructor is then used accordingly.

Let's check its functionality:

const dogZooClient = new ZooClient("dog");
dogZooClient.makeSounds(); // woof

class Dolphin extends Animal {
  makeSounds() {
    console.log("🐬🔊");
  }
}
const dolphinZooClient = new ZooClient(Dolphin);
dolphinZooClient.makeSounds(); // 🐬🔊

As intended, the client performs as expected. Let's ensure there are no unintended uses:

new ZooClient("badName"); // error!
// Argument of type '"badName"' is not assignable to
// parameter of type '"cat" | "dog" | (new () => Animal)'.

class NotAnAnimal {
  makeSmells() {
    console.log("👃");
  }
}
new ZooClient(NotAnAnimal); // error!
// Property 'makeSounds' is missing in type 'NotAnAnimal'
// but required in type 'Animal'.

The above cases are correctly rejected.

Hope this information proves helpful. Best of luck!

Link to code

Answer 2

Just a quick note, at the moment your Cat and Dog types are identical in structure. This means that the compiler cannot differentiate between them. While this may not cause any issues, it can lead to unexpected outcomes (such as IntelliSense indicating that a Dog is actually a Cat). To avoid unintentional equivalence between types in my code examples, I prefer to do the following:

class Dog extends Animal {
  chaseCars() {}
  public makeSounds() {
    console.log("woof");
  }
}

class Cat extends Animal {
  chaseMice() {}
  public makeSounds() {
    console.log("meow");
  }
}

By structurally differentiating between a Cat and a Dog (one chases mice while the other chases cars) along with their unique names, everything falls into place.

My suggestion would be to create a registry of predefined Animal constructors:

const builtInAnimals = {
  cat: Cat,
  dog: Dog
};

And define an associated type:

type BuiltInAnimals = typeof builtInAnimals;

This allows for the implementation of your ZooClient class as follows:

class ZooClient {
  public mostFamousAnimal: Animal;
  constructor(someAnimal: keyof BuiltInAnimals | (new () => Animal)) {
    const animalConstructor =
      typeof someAnimal === "string" ? builtInAnimals[someAnimal] : someAnimal;
    this.mostFamousAnimal = new animalConstructor();
  }

  public makeSounds() {
    this.mostFamousAnimal.makeSounds();
  }
}

The constructor now accepts either a keyof BuiltInAnimals (in this case, either "cat" or "dog") or a constructor returning an Animal. The animalConstructor variable makes use of a typeof type guard to determine the type of someAnimal, ensuring it is set as new() => Animal. The constructor is then used accordingly.

Let's check its functionality:

const dogZooClient = new ZooClient("dog");
dogZooClient.makeSounds(); // woof

class Dolphin extends Animal {
  makeSounds() {
    console.log("🐬🔊");
  }
}
const dolphinZooClient = new ZooClient(Dolphin);
dolphinZooClient.makeSounds(); // 🐬🔊

As intended, the client performs as expected. Let's ensure there are no unintended uses:

new ZooClient("badName"); // error!
// Argument of type '"badName"' is not assignable to
// parameter of type '"cat" | "dog" | (new () => Animal)'.

class NotAnAnimal {
  makeSmells() {
    console.log("👃");
  }
}
new ZooClient(NotAnAnimal); // error!
// Property 'makeSounds' is missing in type 'NotAnAnimal'
// but required in type 'Animal'.

The above cases are correctly rejected.

Hope this information proves helpful. Best of luck!

Link to code

What is the most effective approach for annotating TypeScript abstract classes that are dynamically loaded?

Answer №1

Similar questions

Refreshing the page causes Material UI Button to revert to default styling

When organizing Node.js express routes in separate files, the Express object seamlessly transforms into a Router object for efficient routing

Exploring the capabilities of VueJs in detecting events triggered by parent components

The functionality of $watch in AngularJS is not meeting the desired outcomes

Exploring the capabilities of Node.js functions

Guide to implementing the HttpOnly flag in a Node.js and Express.js application

Why does adding to an array in the Vuex store replace all existing values with the last entry?

How can Vue.js pass an array from a child component to its parent component?

Implement styling based on user input - Transmit form data via PHP to designated email address

Error message in the browser console: Uncaught TypeError - The function allSections.addEventListener is not recognized

Issue with Component: Data is not being injected into controller from ui-router resolve, resulting in undefined data

Upon transitioning from typescript to javascript

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

What is the best way to set up an on-change listener for material-ui's <CustomInput...>?

Delaying UI interactivity until the document is fully loaded

Sorting through names within a nested array based on specific criteria

Utilizing the "return" keyword in Javascript outside of function declarations

Troubleshooting incorrect data display in AngularJS using ng-repeat

Can someone provide instructions on how to convert base64 data to an image file

Using PHP, create a redirect page that utilizes AJAX and jQuery for a seamless user experience