Typescript convert array to object with specified type

Question

I'm trying to convert an array of classes to a object that has it's class name as the object key. So;

I have an array of classes:

const renderers = [
    Battery,
    Kind
]

And I want to convert to an object like:

{
  Battery: Battery,
  Kind: Kind
}

To get to that, I use reduce to get the Object:

const convertedObject = renderers.reduce((acc, renderer) => {
    acc[renderer.name] = renderer;
    return acc;
}, {});

So convertedObject now has a type of {}. I want this type to be { Battery: typeof Battery, Kind: typeof Kind} (so that I can use keyof typeof to create a type with the string values.)

I know how to get the type of the array by doing type RendererType = typeof renderers[0], which gets me typeof Battery | typeof Kind. Then in the reducer I can do this:

renderers.reduce<{[x: string]: RendererType }>((acc, renderer) => {
    acc[renderer.name] = renderer;
    return acc;
}, {});

So now, convertedObject has a type of { [x: string]: typeof Battery | typeof Kind }, which is ok. But I rather it be the object I described earlier.

I tried to do

renderers.reduce<{[K in keyof RendererType]: RendererType }>((acc, renderer) => {
    acc[renderer.name] = renderer;
    return acc;
}, {});

But then I just get { prototype: typeof Battery | typeof Kind }

Is there a way to get the type that I would need with Typescript somehow?

Did you guys ever figure out a workaround?

Chris
– Chris

2020-04-20 01:21:32 +00:00
Commented Apr 20, 2020 at 1:21 — Chris
– Chris, Commented Apr 20, 2020 at 1:21

Garry Xiao · Accepted Answer · 2021-09-15 01:42:31Z

3

function b<K extends string>(...keys: K[]) : { [T in K]: string }
{
    const init = {} as { [T in K]: string }
    return keys.reduce((a, v) => ({ ...a, [v]: 'label'}), init);
}
var l = b('key1', 'key2');
console.log(l.key1, l.key2);

Maybe that's you want.

answered Sep 15, 2021 at 1:42

Garry Xiao

2523 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jecfish · Accepted Answer · 2018-01-24 18:22:44Z

2

Is the array fixed to two? If yes, then probably can do the below:

interface R { battery?: B; kind?: K; } // set fields as optional

renderers.reduce((acc, renderer) => {
  acc[renderer.name] = renderer;
  return acc;
}, {} as R); // strong type it manually

answered Jan 24, 2018 at 18:22

Jecfish

4,2211 gold badge22 silver badges16 bronze badges

1 Comment

Jonathan Cammisuli Over a year ago

Unfortunately not, more could be added as they're needed.

sno2 · Accepted Answer · 2021-09-15 03:22:56Z

Sadly, this is currently impossible to do with arrays due to the fact that TypeScript does not hold the name property as a string literal in an object's prototype.

class Ball {}

const className = Ball.name; // resolves to just `string`, not `"Ball"`
console.log(className); // "Ball"

Here are the two solutions that I would go with if I was in your position.

#1 - Accept the renderers as an object instead of an array.

Although, I only advise you go with this solution if the order of your renderer classes does not matter. The JavaScript key-value shorthand would make this easy to incorporate for your needs.

class Ball {}
class Person {}

const paramForFunc = { Ball, Person };
type RendererNames = keyof typeof paramForFunc; // "Ball" | "Person"

#2 - Require renderers implement an interface with a property for the name

interface RendererConstructor {
    readonly alias: string;
}

class Foo {
    static alias = "Foo" as const;
}

class Bar {
    static alias = "Bar" as const;
}

function assertRenderers<T extends readonly RendererConstructor[]>(renderers: T): T[number]["alias"] {
    throw Error("unimplemented");
}

const foo = assertRenderers([Foo, Bar] as const); // "Foo" | "Bar"

Titian Cernicova-Dragomir · Accepted Answer · 2018-01-24 18:31:39Z

0

I'm afraid what you want is not possible to convert an array to an object type having as property names the names of the types, at least not without manually specifying the names again (as suggested in another answer). You could start from the other end, have an object that conforms to the desired shape and convert it to an array:

const renderersObject = {
    Battery, // This is the same as Battery: Battery, so we don't have o specify it twice
    Kind
};

And then you can convert it to an array using Object.value (or a polyfill for it)

const renderers = Object.values(renderersObject);

answered Jan 24, 2018 at 18:31

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

1 Comment

Jonathan Cammisuli Over a year ago

Honestly, this is where I went to first, but we're using Angular and its compiler does not like functions inside it's modules and other frustrating stuff like that.

Collectives™ on Stack Overflow

Typescript convert array to object with specified type

4 Answers 4

Comments

1 Comment

#1 - Accept the renderers as an object instead of an array.

#2 - Require renderers implement an interface with a property for the name

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

#1 - Accept the renderers as an object instead of an array.

#2 - Require renderers implement an interface with a property for the name

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related