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

struggle with converting JSON string into an array from server

Learn the process of updating an Xero invoice seamlessly with the xero-Node integration

Create a package themed with Material UI for export

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Using Angular expressions, you can dynamically add strings to HTML based on conditions

Crafting Effective AngularJS Directives

Tips for successfully passing an entire object in the data of a datatable column property

Trigger JavaScript keypress event on keypress

A JavaScript object featuring a predefined value

What is the best way to transfer variables to a different page through a pop-up window?

Steps to Hide a Material-UI FilledInput

Incorporating Checkbox Value into Textbox with classic ASP and jQuery

Tips for emphasizing a searched item in V-data-table using VueJS

Implementing a delay using setTimeOut function to execute an action upon user input

Using local fonts with Styled Components and React TypeScript: A beginner's guide

show various commands and outcomes of the getElementsByClassName() function

Observing fluctuations in variable values within Angular2

How to delete an item from an object in TypeScript

Discover the path with the power of JavaScript

extracting the ID from within an iframe