Is it possible to create a class object with properties directly from the constructor, without needing to cast a custom constructor signature

Question

Is it possible to create a class object with properties directly from the constructor, without needing to cast a custom constructor signature

class __Constants__ {
  [key: string]: string;
  constructor(values: string[]) {
    values.forEach((key) => {
      this[key] = key;
    });
  }
}

const Constants = __Constants__ as {
  new <T extends readonly string[]>(values: T): { [k in T[number]]: k };
};

const __colors__ = ["BLUE", "GREEN"] as const;

const Colors = new Constants(__colors__);
// const Colors: {
//   BLUE: "BLUE",
//   GREEN: "GREEN",
// }

Is there a way to define the __Constants__ class to have the same output type as the cast, without needing to modify the custom constructor signature?

Note that I am currently working on transitioning an old JavaScript codebase to TypeScript and aiming to minimize alterations to the original JS code. The actual Constants class is more complex, but here I've simplified the issue I'm encountering.

typescript mapped-types

Answer 1

Answer №1

Here is how it operates:

const Constants = class {
  [key: string]: string;
  constructor(values: string[]) {
    values.forEach((key) => {
      this[key] = key;
    });
  }
} as {
  new <T extends readonly string[]>(values: T): { [k in T[number]]: k };
};


const __colors__ = ["BLUE", "GREEN"] as const;

const Colors = new Constants(__colors__);

TypeScript playground

This script utilizes what are known as "Class expressions"

UPDATE: I experimented with another approach. Instead of a class, why not use a function like this:

function Constants<T extends readonly string[]>(values: T): { [k in T[number]]: k } {
  const obj: any = {};
  values.forEach((key) => {
    obj[key] = key;
  });
  return obj;
}

TypeScript playground

Remember to invoke it as a function rather than creating an instance of the class:

const __colors__ = ["BLUE", "GREEN"] as const;

const Colors = Constants(__colors__); // avoid using "new" here

Answer 2

Here is how it operates:

const Constants = class {
  [key: string]: string;
  constructor(values: string[]) {
    values.forEach((key) => {
      this[key] = key;
    });
  }
} as {
  new <T extends readonly string[]>(values: T): { [k in T[number]]: k };
};


const __colors__ = ["BLUE", "GREEN"] as const;

const Colors = new Constants(__colors__);

TypeScript playground

This script utilizes what are known as "Class expressions"

UPDATE: I experimented with another approach. Instead of a class, why not use a function like this:

function Constants<T extends readonly string[]>(values: T): { [k in T[number]]: k } {
  const obj: any = {};
  values.forEach((key) => {
    obj[key] = key;
  });
  return obj;
}

TypeScript playground

Remember to invoke it as a function rather than creating an instance of the class:

const __colors__ = ["BLUE", "GREEN"] as const;

const Colors = Constants(__colors__); // avoid using "new" here

Is it possible to create a class object with properties directly from the constructor, without needing to cast a custom constructor signature

Answer №1

Similar questions

Utilize a generic approach for every element within a union: Transforming from Some<1 | 2 | 3> to individual Some<1>, Some<2>, or Some<3> instances

Ensure that the query value remains constant in Express.js

After calling the service, Angular 2 is unable to perform any actions within the subscribe method

Why isn't the constraint satisfied by this recursive map type in Typescript?

Is there a way to modify a suffix snippet and substitute the variable in VS Code?

What is the Typescript compiler utilized by Visual Studio 2015 when compiling on save?

I'm facing difficulty in assigning props because of the specific nature of generics in Typescript

What is the best way to check the API response status in NextJS13?

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

Is there a way to modify the antd TimePicker to display hours from 00 to 99 instead of the usual 00 to 23 range?

Avoiding type errors in d3 v5 axis by using Typescript

The editor is locked and choices are displayed in a vertical orientation

Troubleshooting typescript error in styled-components related to Material-UI component

Problem with sequential promises

Error Encountered: Unable to locate angular/core module in Angular 2

What is the best way to maintain the order of variadic types for conditionally inferred conditional types?

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

Contrast between utilizing and publishing, demanding and bringing in within Express

Every time I attempt to install a package, I encounter an NPM unmet peer dependency issue

When creating utility classes, is it beneficial to offer a non-mutable API to facilitate their integration with frameworks such as React?