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

Updating meta tags dynamically in Angular Universal with content changes

Tips for manually inputting dates in Primeng Calendar Datepicker with the slash "/" symbol

What strategies can I use to address the issue of requiring a type before it has been defined?

Creating an Inner Join Query Using TypeORM's QueryBuilder: A Step-by-Step Guide

Tips for specifying the type when utilizing the spread operator to pass props

Troubleshooting fastify library errors related to ajv validation

Packaging a NodeJS project in Visual Studio - A step-by-step guide to creating and setting up an N

My customized mat-error seems to be malfunctioning. Does anyone have any insight as to why?

Is the naming convention for parameterized types (T, U, V, W) in Generics adhered to by Typescript?

Redux-toolkit payload does not recognize the specified type

The struggle of implementing useReducer and Context in TypeScript: A type error saga

RxJS: Transforming an Observable array prior to subscribing

Steps for referencing a custom JavaScript file instead of the default one:

Exploring the functionality of custom hooks and context in asynchronous methods using React Testing Library

When you use array[index] in a Reduce function, the error message "Property 'value' is not defined in type 'A| B| C|D'" might be displayed

tips for concealing a row in the mui data grid

Showing json information in input area using Angular 10

Key factors to keep in mind when comparing JavaScript dates: months

Transforming Excel data into JSON format using ReactJS

The expansion feature of PrimeNG Turbotable