Creating an enum using keys from objects within an array in TypeScript

Question

Creating an enum using keys from objects within an array in TypeScript

How can I type a string to be within one of the static IDs in a hardcoded array called storage using const storage : Readonly<{id: string}[]>? The array will remain unchanged during runtime.

I attempted (typeof storage)[number]['id'] but it only returns a string. I also tried satisfies Readonly<{id:string}[]>.

interface HasID {
  id: string
  info?: any
}
const storage : Readonly<HasID[]> = [
 { id: 'foo' },
 { id: 'bar', info: ['baz'] }
]
const storage2 = [
  { id: 'foo' },
  { id: 'bar', info: ['baz'] }
] satisfies Readonly<HasID[]>

let str // aiming to type this as "foo" | "bar"

type StorageID = (typeof storage)[number]['id'] // string
type StorageID2 = (typeof storage2)[number]['id'] // string

typescript

Answer 1

Answer №1

Many times, when individuals create array literals or object literals, their main intention is to initialize a mutable variable and anticipate changes in its contents. TypeScript tends to infer these types quite broadly. Therefore, even with the introduction of the satisfies operator, the inferred type may be wider than anticipated:

const storage = [
  { id: 'foo' },
  { id: 'bar', info: ['baz'] }
] satisfies Readonly<HasID[]>;
/*
const storage: ({
    id: string;
    info?: undefined;
} | {
    id: string;
    info: string[];
})[]
*/

The specific literal types of the `id` properties tend to get lost.

In scenarios where there is no plan to modify the content of a literal object or array, it's advisable to utilize the const assertion to prompt TypeScript to derive a more precise type:

const storage = [
  { id: 'foo' },
  { id: 'bar', info: ['baz'] }
] as const satisfies Readonly<HasID[]>
/* 
const storage: readonly [{
    readonly id: "foo";
}, {
    readonly id: "bar";
    readonly info: readonly ["baz"];
}]
*/

This type retains the literal types of the `id` property (along with the arrangement of array elements). Subsequently, utilizing indexed access types becomes feasible as intended:

type StorageID = (typeof storage)[number]['id']
//   ^? type StorageID = "foo" | "bar"

Link to code on Playground

Answer 2

Many times, when individuals create array literals or object literals, their main intention is to initialize a mutable variable and anticipate changes in its contents. TypeScript tends to infer these types quite broadly. Therefore, even with the introduction of the satisfies operator, the inferred type may be wider than anticipated:

const storage = [
  { id: 'foo' },
  { id: 'bar', info: ['baz'] }
] satisfies Readonly<HasID[]>;
/*
const storage: ({
    id: string;
    info?: undefined;
} | {
    id: string;
    info: string[];
})[]
*/

The specific literal types of the `id` properties tend to get lost.

In scenarios where there is no plan to modify the content of a literal object or array, it's advisable to utilize the const assertion to prompt TypeScript to derive a more precise type:

const storage = [
  { id: 'foo' },
  { id: 'bar', info: ['baz'] }
] as const satisfies Readonly<HasID[]>
/* 
const storage: readonly [{
    readonly id: "foo";
}, {
    readonly id: "bar";
    readonly info: readonly ["baz"];
}]
*/

This type retains the literal types of the `id` property (along with the arrangement of array elements). Subsequently, utilizing indexed access types becomes feasible as intended:

type StorageID = (typeof storage)[number]['id']
//   ^? type StorageID = "foo" | "bar"

Link to code on Playground

Creating an enum using keys from objects within an array in TypeScript

Answer №1

Similar questions

Exporting Arrays in Ionic Angular with Typescript is an essential feature

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

Is it possible for a service to retrieve a component's template?

displaying post data in the URL address bar

How is it that in TypeScript, a potential numeric value in an interface can be transformed into an impossible numeric value in a class implementation?

Save information on the server and organize it into an array for use in local operations

Exploring Angular 8 Routing Testing within a Service

Typescript: The original type cannot be indexed with a type-mapped type

Convert an enum value to a String representation

`How can I stop typescript from converting dynamic imports to require()?`

Dealing with Endless Loops in React TypeScript: What Happens When State is Set in Multiple Instances of the Same

What could be causing the Dynamic Options to fail to load on the material-react tailwind component?

Tips for enforcing strict typing in TypeScript when implementing abstract functions

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Error encountered in TypeScript when attempting to combine type string, number, or null, but not when combining only string or

Angular 2 does not recognize the existence of .then in type void

Joining the Parent Route String with a Variable using Angular Routerlink

The field in the constructor is guaranteed to have a value, but when accessed in a method, it may be null in TypeScript

Is it possible to utilize an enum for typing an array variable?

SystemJS could not locate the root directory for RxJS