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

What practical applications exist for preserving JSX post-transpilation of a tsx file?

Firebase cloud function encountered an issue: Error: EISDIR - attempting to perform an unauthorized operation on a directory

Typescript Server Problem: Critical Error - Mark-compacts Inefficiently Close to Heap Limit, Allocation Unsuccessful - JavaScript Heap Exhausted

Invoke a function of a child component that resides within the <ng-content> tag of its parent component

Struggling with hashtags and ampersands in Angular when making an HTTP request

extract keys and values from an array of objects

Why is it that in reactive forms of Angular, the parameter being passed in formControlName is passed as a string?

Tips for avoiding the <p> and <br> elements while using a ContentEditable div

What is the process for extracting dates in JavaScript?

What is the solution for resolving this Angular issue: Expected argument expression.ts(1135)?

Using the useContext hook across multiple files without needing to export it

Using dangerouslySetInnerHTML in ReactJS can potentially strip away data attributes

Two services declared with "providedIn: 'root'" that have identical names

Jasmine is raising an error: "TypeError: Unable to access the property 'client' of an undefined object"

Tips for resolving the issue of loading not appearing on screen in Angular

Experimenting with async generator using Jest

A guide to effectively utilizing a TypeScript cast in JSX/TSX components

Convert all existing objects to strings

Are the fromPromise and toPromise functions in Rxjs resource-intensive?

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms