Creating an Object Factory that preserves the type: A step-by-step guide

I developed a unique object factory to create instances of all my interfaces:

interface SomeInterface {
  get(): string;
}

class Implementation implements SomeInterface {
  constructor() {}
  get() {
    return "Hey :D";
  }
}

type Injectable = {
  [key: string]: () => unknown;
};

// deno-lint-ignore prefer-const
let DEFAULT_IMPLEMENTATIONS: Injectable = {
  SomeInterface: () => new Implementation(),
};

let MOCK_IMPLEMENTATIONS: Injectable = {};

class Factory {
  static getInstance(interfaceName: string, parameters: unknown = []) {
    if (MOCK_IMPLEMENTATIONS[interfaceName])
      return MOCK_IMPLEMENTATIONS[interfaceName]();
    return DEFAULT_IMPLEMENTATIONS[interfaceName]();
  }

  static mockWithInstance(interfaceName: string, mock: unknown) {
    MOCK_IMPLEMENTATIONS[interfaceName] = () => mock;
  }
}

export const ObjectFactory = {
  getInstance<T>(name: string): T {
    return Factory.getInstance(name) as T;
  },

  mockWithInstance: Factory.mockWithInstance,
};

const impl = ObjectFactory.getInstance<SomeInterface>("SomeInterface");

This innovative Factory enables easy instantiation and mocking of interfaces. The issue lies in having to specify both the interface name and type when calling the function:

ObjectFactory.getInstance<SomeInterface>("SomeInterface")

While looking at this discussion, I found using a Base interface not ideal. It also fails to maintain the appropriate type information.

Ideally, I envision a solution where only the interface name is required for invoking the function.

Note: Currently, the use of Injectable is a workaround to ensure code functionality. My desired approach would involve solely the implementation name, like so:

let DEFAULT_IMPLEMENTATIONS = {
    SomeInterface: Implementation
}

Answer №1

Given your specific set of name-to-type mappings that you want to support, the recommended approach is to conceptualize an object type T that represents these mappings. Then, for any interface name K extends keyof T, you will work with functions that return the property associated with that name - essentially, functions of type () => T[K]. This technique leverages keyof and lookup types to provide typing to your factory.

In this scenario, we are utilizing a concrete type such as

{"SomeInterface": SomeInterface; "Date": Date}
for T. However, for ease of compilation, it's preferable to keep T generic. Here's an example implementation of a generic ObjectFactory:

function makeFactory<T>(DEFAULT_IMPLEMENTATIONS: { [K in keyof T]: () => T[K] }) {
  const MOCK_IMPLEMENTATIONS: { [K in keyof T]?: () => T[K] } = {};
  return {
    getInstance<K extends keyof T>(interfaceName: K) {
      const compositeInjectable: typeof DEFAULT_IMPLEMENTATIONS = {
        ...DEFAULT_IMPLEMENTATIONS,
        ...MOCK_IMPLEMENTATIONS
      };
      return compositeInjectable[interfaceName]();
    },
    mockWithInstance<K extends keyof T>(interfaceName: K, mock: T[K]) {
      MOCK_IMPLEMENTATIONS[interfaceName] = () => mock;
    }
  }
}

To ensure type safety without relying on type assertions, I have refactored your code to allow for verification by the compiler. Let's delve into the details:

The makeFactory function is parameterized by the mapping type T and expects an input named DEFAULT_IMPLEMENTATIONS of type

{ [K in keyof T]: () => T[K] }
. This defines a mapped type where the keys (K) match those of T, and the properties are zero-argument functions returning values of type T[K].

Within the function implementation, we introduce MOCK_IMPLEMENTATIONS. While its structure mirrors that of DEFAULT_IMPLEMENTATIONS, the properties are marked as optional using the ? modifier in [K in keyof T]?.

The function returns the factory itself, which provides two methods:

The getInstance method is generic with respect to K (the interface name type), and it outputs values of type T[K]. By merging DEFAULT_IMPLEMENTATIONS and MOCK_IMPLEMENTATIONS using object spread syntax, we create a unified object compositeInjectable that aligns with the type of DEFAULT_IMPLEMENTATIONS. Subsequently, we access the indexed property corresponding to interfaceName and call the associated function.

The mockWithInstance method also operates generically based on K (interface name type), receiving parameters of type K (interface name) and T[K] (corresponding interface).


Now let’s observe the functionality in action:

const ObjectFactory = makeFactory({
  SomeInterface: (): SomeInterface => new Implementation(),
  Date: () => new Date()
});

console.log(ObjectFactory.getInstance("SomeInterface").get().toUpperCase()); // HEY :D
ObjectFactory.mockWithInstance("SomeInterface", { get: () => "howdy" });
console.log(ObjectFactory.getInstance("SomeInterface").get().toUpperCase()); // HOWDY
console.log(ObjectFactory.getInstance("Date").getFullYear()); // 2020

The described process unfolds as expected. We instantiate ObjectFactory via makeFactory and provide the desired DEFAULT_IMPLEMENTATIONS object. Specifically stating that the SomeInterface property yields a value of type SomeInterface assists the compiler in making accurate deductions.

You'll notice that the compiler permits calls to ObjectFactory.getInstance() and ObjectFactory.mockWithInstance() with appropriate arguments and resulting in the expected data types, all of which work seamlessly during runtime.


Link to Playground for testing code

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

You won't find the command you seek within the confines of "tsc."

Whenever I type tsc into the terminal (regardless of location), I am met with the following message: $ npx tsc --version This is not the tsc command you are looking for In order to access the TypeScript compiler, tsc, from the command li ...

The module "ng-particles" does not have a Container component available for export

I have integrated ng-particles into my Angular project by installing it with npm i ng-particles and adding app.ts import { Container, Main } from 'ng-particles'; export class AppComponent{ id = "tsparticles"; /* Using a remote ...

What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

I am currently in the process of updating the Paper.js Typings located on GitHub at this repository: github.com/clark-stevenson/paper.d.ts Within Paper.js, there exists a MouseEvent class, which is not an extension of JavaScript's MouseEvent, but ra ...

What is the method for defining the type of a variable without assigning a value to it?

Working on an Angular 11 project using Typescript with Strict Mode, I encountered the following issue: export class AvatarComponent { @Input() user: UserModel = null; } This resulted in a compilation error: Type 'null' is not assignable to ty ...

Is it possible to develop a C equivalent of the typescript Record type?

Is there a way to create a record type equivalent in C like what can be done in TypeScript, and add attributes during runtime? I am aiming to replicate the following: const familyData: string[] = ["paul", "em", "matthias", "kevin"]; const myFamily: Record ...

What is the best way to launch the Playwright browser in Jest using the setupFilesAfterEnv hook, to ensure accessibility within the test file while incorporating TypeScript?

When using Jest and Playwright, I encountered an issue where I wanted to launch the browser from setupFilesAfterEnv in order to avoid repeating the process in every test file. Despite successfully launching the browser and having global variables accessibl ...

Having trouble with building an Ionic3 project, getting the error message: "Execution failed for task ':app:processDebugResources'. > Failed to execute aapt"

My attempt to develop an android app in ionic 3 hit a roadblock when running 'ionic cordova build android' resulted in the error: Execution failed for task ':app:processDebugResources'. > Failed to execute aapt I have integrated plug ...

Using TypeScript to implement Angular Draggable functionality within an ng-template

Sorry if this question has been asked before, but I couldn't find any information. I am trying to create a Bootstrap Modal popup with a form inside and I want it to be draggable. I have tried using a simple button to display an ng-template on click, b ...

Obtain unfinished designs from resolver using GraphQL Code Generator

In order to allow resolvers to return partial data and have other resolvers complete the missing fields, I follow this convention: type UserExtra { name: String! } type User { id: ID! email: String! extra: UserExtra! } type Query { user(id: ID! ...

If I exclusively utilize TypeScript with Node, is it possible to transpile it to ES6?

I am developing a new Node-based App where browser-compatibility is not a concern as it will only run on a Node-server. The code-base I am working with is in TypeScript. Within my tsconfig.json, I have set the following options for the compiler: { "inc ...

Create a fresh type by dynamically adjusting/filtering its attributes

Suppose we have a type defined as follows: type PromiseFunc = () => Promise<unknown>; type A = { key1: string; key2: string; key3: PromiseFunc; key4: string; key5: PromiseFunc; key6: SomeOtherType1[]; key7: SomeOtherType2[]; key8: ...

The testString's dependencies are unresolved by Nest

Encountered Problem: Facing the following issue while running a unit test case Nest is unable to resolve the dependencies of the testString (?). Please ensure that the argument SECRET_MANAGER_SERVICE at index [0] is available in the context of SecretMa ...

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

Secure a reliable result from a function utilizing switch statements in Typescript

There's a function in my code that takes an argument with three possible values and returns a corresponding value based on this argument. Essentially, it can return one of three different values. To achieve this, I've implemented a switch statem ...

Remapping compound enum-like constant objects dynamically with type safety in TypeScript

I am currently developing a small utility that generates typesafe remapped object/types of compound enums. The term "compound" in this context refers to the enum (essentially a const object) key mapping to another object rather than a numeric or literal va ...

Clicking the button fails to trigger the modal popup

Upon clicking a button, I am attempting to open a modal popup but encountering an error: The button click works, however, the popup does not appear after the event. test.only('Create Template', async({ page })=>{ await page.goto('h ...

Is there an issue with TypeScript and MUI 5 sx compatibility?

Here's a question for you: Why does this code snippet work? const heroText = { height: 400, display: "flex", justifyContent: "center", } <Grid item sx={heroText}>Some text</Grid> On the other hand, why does adding flexDirection: "c ...

Exploring the SOLID Design Principles through TypeScript

Recently, I came across an intriguing article discussing the SOLID principles and delving into the concept of the Dependency Inversion Principle (DIP). The article presented an example to illustrate this principle using both an incorrect and a correct appr ...

Errors can occur when using TypeScript recursive types

Below is a simplified version of the code causing the problem: type Head<T> = T extends [infer U,...unknown[]] ? U : never; type Tail<T> = T extends [unknown,...infer U] ? U : []; type Converter = null; type Convert<T, U extends Converter& ...

Error in Angular: Http Provider Not Found

NPM Version: 8.1.4 Encountered Issue: Error: Uncaught (in promise): Error: Error in ./SignupComponent class SignupComponent_Host - inline template:0:0 caused by: No provider for Http! Error: No provider for Http! The error message usually indicates the a ...