Access key-value pairs of objects without the use of the keyword "as"

Question

Access key-value pairs of objects without the use of the keyword "as"

const resources = {
  background: '',
  player: '',
};
const totalResourceCount = Object.keys(resources).length;

type resourceKey = keyof typeof resources;

export class ResourceLoader {
  images: Record<resourceKey, HTMLImageElement>;
  loadedCount = 0;
  onResourcesLoaded: VoidFunction;

  constructor(onLoaded: VoidFunction) {
    this.onResourcesLoaded = onLoaded;
    const imageMap = {} as Record<resourceKey, HTMLImageElement>;

    Object.entries<string>(resources).forEach(([key, source]) => {
      const img = new Image();
      img.onload = this.onLoad;
      img.src = source;
      imageMap[key as resourceKey] = img;
    });

    this.images = imageMap;
  }

  private onLoad = () => {
    this.loadedCount++;
    if (this.loadedCount === totalResourceCount) {
      this.onResourcesLoaded();
    }
  };
}

I am looking for a way to define typed resources with keys limited to the ones specified in another object.

Is there an alternative method to write the constructor without using "as"?

Any suggestions on improving the code that maps {key: source} -> {key: loadedImage} while tracking the number of items already loaded?

typescript

Answer 1

Answer №1

In summary, it is recommended to use the as keyword or create an array of keys as a workaround.

The TypeScript standard library's typing for Object.entries(obj) and Object.keys(obj) returns keys as strings instead of keyof typeof obj due to the open nature of object types in TypeScript.

The code snippet provided illustrates this concept by showing how properties can be extended in TypeScript interfaces. The compiler does not have a way to represent types with no extra properties, so you may need to explicitly handle known keys using type assertions or redundant key arrays.

If you want to specify only certain keys to the compiler, you can utilize a type assertion like:

(Object.entries(assets) as [assetKey, string][]).forEach(([key, assetSrc]) => {
  // Code here
});

Alternatively, you can define your own array of known keys like:

(["key1", "key2"] as const).forEach(key => {
  // Code here
});

Both methods serve the purpose of informing the compiler about the specific keys to consider. You can choose between them based on your preference for readability and safety.

Overall, handling these scenarios usually involves some form of type assertion to communicate intentions clearly to the TypeScript compiler.

Hopefully, this explanation provides insights and guidance for dealing with such situations effectively. Best of luck!

Explore more on TypeScript Playground

Answer 2

In summary, it is recommended to use the as keyword or create an array of keys as a workaround.

The TypeScript standard library's typing for Object.entries(obj) and Object.keys(obj) returns keys as strings instead of keyof typeof obj due to the open nature of object types in TypeScript.

The code snippet provided illustrates this concept by showing how properties can be extended in TypeScript interfaces. The compiler does not have a way to represent types with no extra properties, so you may need to explicitly handle known keys using type assertions or redundant key arrays.

If you want to specify only certain keys to the compiler, you can utilize a type assertion like:

(Object.entries(assets) as [assetKey, string][]).forEach(([key, assetSrc]) => {
  // Code here
});

Alternatively, you can define your own array of known keys like:

(["key1", "key2"] as const).forEach(key => {
  // Code here
});

Both methods serve the purpose of informing the compiler about the specific keys to consider. You can choose between them based on your preference for readability and safety.

Overall, handling these scenarios usually involves some form of type assertion to communicate intentions clearly to the TypeScript compiler.

Hopefully, this explanation provides insights and guidance for dealing with such situations effectively. Best of luck!

Explore more on TypeScript Playground

Access key-value pairs of objects without the use of the keyword "as"

Answer №1

Similar questions

Learn how to generate specific error messages based on the field that caused the failure of the @Column({ unique: true }) Decorator. Error code 23505

How can you merge arrays in Angular based on their unique names?

The error message "vimeo/player.js - Unable to access property 'nativeElement' as it is undefined" appeared

Issue when trying to use both the name and value attributes in an input field simultaneously

Creating a setup in TypeScript to enable imports between CommonJS and ES modules (for node-fetch and Express)

Ways to sign up for the activeDate variable in MatCalendar so you can display the month and year labels of the current active date in the

Storing information retrieved from the API for use in different modules

"Utilizing provideMockStore in NgRx 8 for setting the state of a specific State Slice

When using the ionic 3 storage.get function, it may return a null value when accessed outside

Assigning a Boolean value of false in JavaScript will result in it being evaluated as true

How come the Angular8 form status registers as VALID even if the input fields are empty?

What leads to the inability to utilize environment variables in this TypeScript app built with Vue 3?

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

Nest is having trouble resolving dependencies for this service

Facing a problem with querying interfaces and types in TypeScript

Updating Radio Button Value in React Using TypeScript Event Handler

Having trouble retrieving data from a JSON file within an Angular application when utilizing Angular services

Exploring the functionality of surveyjs in conjunction with react and typescript

Angular - Implementing a debounce feature for event handling

How to Retrieve a Global Variable in an Angular Template