Generating a custom type in Typescript based on specific array keys

Question

Generating a custom type in Typescript based on specific array keys

Imagine I have a structure like this:

export interface MyObject {
  id: number
  title: string
}

and then I create an array as shown below:

const myArray: MyObject[] = [
  {
    id: 2358,
    title: 'Item 1'
  },
  {
    id: 85373,
    title: 'Item 2'
  }
]

Is there a way to define a type that restricts values to only those ids in the array? For instance, something similar to:

type DesiredType = 2358 | 85373

Check out this Codewich link where different attempts were made but didn't work as expected.

typescript

Answer 1

Answer №1

If you want to determine the type of id in myArray, you can utilize a type query like this: typeof myArray[number]['id']. However, the issue is that the type of id is not retained in the type of myArray.

To maintain the type information, you can use as const (though it sacrifices the MyObject constraint).

const myArray = [
    {
        id: 2358,
        title: 'Item 1'
    },
    {
        id: 85373,
        title: 'Item 2'
    }
] as const;

type Id = typeof myArray[number]['id']

Playground Link

Answer 2

If you want to determine the type of id in myArray, you can utilize a type query like this: typeof myArray[number]['id']. However, the issue is that the type of id is not retained in the type of myArray.

To maintain the type information, you can use as const (though it sacrifices the MyObject constraint).

const myArray = [
    {
        id: 2358,
        title: 'Item 1'
    },
    {
        id: 85373,
        title: 'Item 2'
    }
] as const;

type Id = typeof myArray[number]['id']

Playground Link

Answer 3

Answer №2

If you're looking to create a new type based on the id property of an object, you can achieve this using the Pick utility type:

type MyObjectIdType = Pick<typeof myArray[number], 'id'>;

However, one issue arises when trying to use this with a dynamic array, as the compiler will default to inferring a generic type like number. To force the compiler to recognize the actual values of id, you need to declare the array as a compile-time constant:

const myArray = [
    {
        id: 2358,
        title: 'Item 1'
    },
    {
        id: 85373,
        title: 'Item 2'
    }
] as const;

It's important to note that in order for this constant declaration to work, any specific type declarations like MyObject[] for myArray must be removed. This is because a generic array may not match the two specific elements with distinct id values.

Keep in mind that while this approach is suitable for static arrays, it won't be applicable for dynamically generated arrays during runtime operations.

Answer 4

If you're looking to create a new type based on the id property of an object, you can achieve this using the Pick utility type:

type MyObjectIdType = Pick<typeof myArray[number], 'id'>;

However, one issue arises when trying to use this with a dynamic array, as the compiler will default to inferring a generic type like number. To force the compiler to recognize the actual values of id, you need to declare the array as a compile-time constant:

const myArray = [
    {
        id: 2358,
        title: 'Item 1'
    },
    {
        id: 85373,
        title: 'Item 2'
    }
] as const;

It's important to note that in order for this constant declaration to work, any specific type declarations like MyObject[] for myArray must be removed. This is because a generic array may not match the two specific elements with distinct id values.

Keep in mind that while this approach is suitable for static arrays, it won't be applicable for dynamically generated arrays during runtime operations.

Generating a custom type in Typescript based on specific array keys

Answer №1

Answer №2

Similar questions

Returning a value with an `any` type without proper validation.eslint@typescript-eslint/no-unsafe-return

Utilize the UserService in NestJs to enhance security within the RolesGuard functionality

Retrieving data and parameter data simultaneously from the ActivatedRoute

Expanding Angular FormGroup Models with TypeScript

Leveraging ngIf and ngFor within choice

Error encountered: "Injection error: Angular2 + typescript + jspm : No provider found for Http ( App -> Provider -> Http )"

Customizing number input types in Angular 2 - the perfect solution

Error caused by properties of a variable derived from an interface in the compiler

Implementing theme in Monaco editor without initializing an instance

Troubleshooting ion-radio loop error in Ionic 2

Tips for targeting a specific element with providers in Ionic

Not verifying the argument type in Typescript makes the function generic in nature

Issue with MUI icon import: React, Typescript, and MUI type error - Overload does not match this call

The sanitizer variable becomes null when accessed outside of the NgOnInit function in Angular using TypeScript

There seems to be an issue with the TypeScript error: it does not recognize the property on the options

Exploring Angular 8 Route Paths

Check the type of the indexed value

Retrieve a particular item using the NGXS selector and incorporate it into the template

If a generic string argument is not specified as a string literal, it will not be narrowed unless it is the first argument

What is the primary purpose of the index.d.ts file in Typescript?