How to create a type, based on the properties of objects in an array?

Question

I'm trying to infer the type of a configuration object, whose properties are defined by an array of parameter descriptions.

In short:

// Based on the following array...
const params = [
    { id: "max", example: 75 },
    { id: "label", example: "My Label" },
];

// ...extract values from a request, creating a structure like...
const config = {
    max: 100,
    label: "Max Items",
};

// ... with type:
{ max: number, label: string }

And this is how far I got with my code.

// A simple parameter description interface
type ConfigParameter<IdType, ValueType> = Readonly<{
    // The `IdType` is necessary to get a stricter type
    // parameter instead of a generic `id: string;`. This will be needed
    // later when we infer the type of the `config` object.
    id: IdType;
    example: ValueType;
}>;

// Configuration parameters ------------------------------------

const max: ConfigParameter<"max", number> = {
    id: "max",
    example: 100,
};

const label: ConfigParameter<"label", string> = {
    id: "label",
    example: "My Label",
};

const configParams = [max, label] as const;

// Extracted configuration object ------------------------------
// At some point, the application uses the parameter descriptors
// above to extract data from a request. This is the implementation
// I have so far:

type Config<T extends Readonly<Array<ConfigParameter<string, any>>>> = {
    [key in T[number]["id"]]: T[number]["example"];
};

const config: Config<typeof configParams> = {
    max: 75,
    label: "Some index",
};

Now, the problem is that all properties in config have type number | string number | string , instead of having their respective types:

// Expected type
{ max: number, label: string }

// Actual type
{ max: number | string, label: number | string }

I understand why I get this result, but I have no idea how to limit the type of each key individually.

Any suggestions?

Answer 1

Here you go:

type Config<T extends ReadonlyArray<ConfigParameter<string, any>>> = {
  [K in T[number]["id"]]: Extract<T[number], { id: K }>["example"]
};

The difference here is using Extract , a utility type that pulls relevant pieces out of unions. That should work as you need. You can make it even prettier (the output, not the definition) with this:

type Config<T extends ReadonlyArray<ConfigParameter<string, any>>> = {
  [K in T[number]["id"]]: Extract<T[number], { id: K }>["example"]
} extends infer O
  ? { [P in keyof O]: O[P] }
  : never;

Now you get the strong typing you want:

const config: Config<typeof configParams> = {
  max: 75,
  label: "Some index"
};
/* const config: {
    max: number;
    label: string;
} */

Okay, hope that helps; good luck!

Link to code

Answer 2

try to use the interface :

interface ConfigParameter{
    max: number,
    label: string
}

const obj: ConfigParameter = { max: 75, label: "Some index" };