Creating a key/value pair type in Typescript that mirrors the shape of an object within an array: How to do it?

Question

Creating a key/value pair type in Typescript that mirrors the shape of an object within an array: How to do it?

Here is the data that I have:

const pets = [
  {
    type: 'cat',
    name: 'penny'
  },
  {
    type: 'dog',
    name: 'Fido'
  },
  {
    type: 'fish',
    name: 'Nemo'
  }
];

In order for a pet to be considered valid, it must match one of these 3 exact shapes (i.e. both the key and the value must match). For example, this is a valid pet:

  {
    type: 'dog',
    name: 'Fido'
  }

However, these are not valid:

  {
    age: 'dog',
    name: 'Fido'
  },

and

  {
    type: 'dog',
    name: 'Sammy'
  },

and so on.

Since my actual object is much larger than this, I don't want to manually define this type. Is there a way to do it dynamically?

I attempted the following, but it did not work:

type Pet = {
  [key in keyof typeof pets]: typeof pets[key];
};

typescript

Answer 1

Answer №1

To improve the type inference in TypeScript, utilize the as const assertion on the pets array. This tells TypeScript to infer the most specific types possible rather than defaulting to { type: string, name: string }[], which is less informative.

const pets = [
  {
    type: 'cat',
    name: 'penny'
  },
  {
    type: 'dog',
    name: 'Fido'
  },
  {
    type: 'fish',
    name: 'Nemo'
  }
] as const;

With pets now typed as:

const pets: readonly [{
    readonly type: "cat";
    readonly name: "penny";
}, {
    readonly type: "dog";
    readonly name: "Fido";
}, {
    readonly type: "fish";
    readonly name: "Nemo";
}]

Observe the specificity of the objects with distinct strings.

The Pet type simplifies to:

type Pet = typeof pets[number]
/*
{
    readonly type: "cat";
    readonly name: "penny";
} | {
    readonly type: "dog";
    readonly name: "Fido";
} | {
    readonly type: "fish";
    readonly name: "Nemo";
}
*/

By indexing with number, the array type yields a union of all member types, representing each specific pet type.

Now, the following code demonstrates the expected behavior:

const fido: Pet = { // works
    type: 'dog',
    name: 'Fido'
}

const bad1: Pet = { // error due to Nemo being a fish
    type: 'cat', 
    name: 'Nemo'
}

const bad2: Pet = { // error as penny is a cat
    type: 'dog',
    name: 'penny'
}

Try it on the playground

Answer 2

To improve the type inference in TypeScript, utilize the as const assertion on the pets array. This tells TypeScript to infer the most specific types possible rather than defaulting to { type: string, name: string }[], which is less informative.

const pets = [
  {
    type: 'cat',
    name: 'penny'
  },
  {
    type: 'dog',
    name: 'Fido'
  },
  {
    type: 'fish',
    name: 'Nemo'
  }
] as const;

With pets now typed as:

const pets: readonly [{
    readonly type: "cat";
    readonly name: "penny";
}, {
    readonly type: "dog";
    readonly name: "Fido";
}, {
    readonly type: "fish";
    readonly name: "Nemo";
}]

Observe the specificity of the objects with distinct strings.

The Pet type simplifies to:

type Pet = typeof pets[number]
/*
{
    readonly type: "cat";
    readonly name: "penny";
} | {
    readonly type: "dog";
    readonly name: "Fido";
} | {
    readonly type: "fish";
    readonly name: "Nemo";
}
*/

By indexing with number, the array type yields a union of all member types, representing each specific pet type.

Now, the following code demonstrates the expected behavior:

const fido: Pet = { // works
    type: 'dog',
    name: 'Fido'
}

const bad1: Pet = { // error due to Nemo being a fish
    type: 'cat', 
    name: 'Nemo'
}

const bad2: Pet = { // error as penny is a cat
    type: 'dog',
    name: 'penny'
}

Try it on the playground

Answer 3

Answer №2

Try using the Record function in conjunction with an enum to enforce specific types for certain values. It may not be the exact solution you're looking for, but it's worth a shot.

// Ensure only these keys are allowed in the Record type
enum Keys {
  TYPE = "type",
  NAME = "name",
}

// Define a Record type that can only have keys from the Keys enum and string values
type Pet = Record<Keys, string>;

const pets: Pet[] = [
  {
    type: "cat",
    name: "penny",
  },
  {
    type: "dog",
    name: "Fido",
  },
  {
    type: "fish",
    name: "Nemo",
  },
];

// Valid example
const pet: Pet = {
  type: "cat",
  name: "fido",
};

// Invalid example
const invalidPet: Pet = {
    age: 'dog',
    name: 'Fido'
};

Keep in mind that the Keys enum dictates which keys are allowed, while values are not restricted and can be any string.

If you also want to restrict the values (which may not be practical), you could create a separate enum for that purpose too.

Answer 4

Try using the Record function in conjunction with an enum to enforce specific types for certain values. It may not be the exact solution you're looking for, but it's worth a shot.

// Ensure only these keys are allowed in the Record type
enum Keys {
  TYPE = "type",
  NAME = "name",
}

// Define a Record type that can only have keys from the Keys enum and string values
type Pet = Record<Keys, string>;

const pets: Pet[] = [
  {
    type: "cat",
    name: "penny",
  },
  {
    type: "dog",
    name: "Fido",
  },
  {
    type: "fish",
    name: "Nemo",
  },
];

// Valid example
const pet: Pet = {
  type: "cat",
  name: "fido",
};

// Invalid example
const invalidPet: Pet = {
    age: 'dog',
    name: 'Fido'
};

Keep in mind that the Keys enum dictates which keys are allowed, while values are not restricted and can be any string.

If you also want to restrict the values (which may not be practical), you could create a separate enum for that purpose too.

Creating a key/value pair type in Typescript that mirrors the shape of an object within an array: How to do it?

Answer №1

Answer №2

Similar questions

Tips for assigning a JSON object as the resolve value and enabling autosuggestion when utilizing the promise function

Encountering a delay in receiving server data causing errors in Angular 2

Encountering a Typescript error while attempting to utilize mongoose functions

Tips on how to incorporate a .js file into my .tsx file

A data type labeled as 'undefined' needs to include a method called '[Symbol.iterator]()' which will then return an iterator

What causes the failure of $event binding when using RowGroup tables with PrimeNG?

Poorly packaged library - Custom Angular library - Node Package Manager

Error: Virtual script not located; possibly absent <script lang="ts" / "allowJs": true / within the jsconfig.json.volar

Passing extra arguments to a callback function in Typescript

Creating a read-only DIV using Angular - a step-by-step guide

Is there a way to include two objects in an Angular2 post request?

Finding the appropriate method to access a template variable reference in a designated row of an Angular Material table (Angular 7)

Using Vue and TypeScript to define components

Storing file paths as string variables in Angular: a quick guide

What allows the type expression to be considered valid with a reduced amount of arguments?

Set S3 Bucket Policy to include ELB Account

Tips on pairing elements from a ngFor processed list with another list using ngIf

`Unable to upload spreadsheet file in xlsx format`

What could be causing the cyclic dependency problem after upgrading to Angular 9?

Looking to execute multiple programs simultaneously within the prestart script in the package.json file, and bypass any exit error codes