Maintaining data types with Object.keys()

Question

Maintaining data types with Object.keys()

My challenge involves an object with typed keys referred to as Statuses (StatusesType). The task is to iterate over the object and pass keys to a method that expects parameters of the same type, let's call it statusPrinter().

type StatusesType = 'PENDING' | 'APPROVED' | 'REJECTED';
type SomeMap = {
    [key in StatusesType]?: number
}

const STATUSES: SomeMap = {
    PENDING: 5,
    REJECTED: 2,
};

function statusPrinter(val: StatusesType) {
    console.log('- ', val);
}

Object.keys(STATUSES).forEach(status => {
    statusPrinter(status);
});

However, TypeScript throws an error when I use statusPrinter(status);, stating:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'StatusesType'.

The question now becomes how can I pass this key while preserving its original type?

I am aware of the workaround using

statusPrinter(<StatusesType>status);

, but I would prefer a more native solution if possible.

Update: If maintaining type consistency during iteration over object keys using Object.keys() proves impossible, what other alternatives exist? Is there a way to iterate over keys while preserving types, and if so, which approach is recommended? While I am open to options beyond Object.keys(), preserving the original object structure is ideal.

Thank you!

typescript static-typing

Answer 1

Answer №1

Concise and safe solution utilizing the in-built ES2015 Map feature:

type StatusesType = 'PENDING' | 'APPROVED' | 'REJECTED';

const STATUSES = new Map<StatusesType, number>([
    ['PENDING', 5],
    ['REJECTED', 2],
]);

function printStatus(val: StatusesType) {
    console.log('- ', val);
}

STATUSES.forEach((_, status) => printStatus(status));

Answer 2

Concise and safe solution utilizing the in-built ES2015 Map feature:

type StatusesType = 'PENDING' | 'APPROVED' | 'REJECTED';

const STATUSES = new Map<StatusesType, number>([
    ['PENDING', 5],
    ['REJECTED', 2],
]);

function printStatus(val: StatusesType) {
    console.log('- ', val);
}

STATUSES.forEach((_, status) => printStatus(status));

Answer 3

Answer №2

When using Object.keys, it will provide an array containing keys that are all of the type string.

The signature for Object.keys would therefore be

key(object: {}): Array<string>

. This means that as you iterate through the keys, the variable status will be a string and not a StatusesType.

If needed, you can explicitly specify the type by casting like so:

statusPrinter(status as StatusesType)

For further information, please refer to:

Typescript: cast an object to other type

Answer 4

When using Object.keys, it will provide an array containing keys that are all of the type string.

The signature for Object.keys would therefore be

key(object: {}): Array<string>

. This means that as you iterate through the keys, the variable status will be a string and not a StatusesType.

If needed, you can explicitly specify the type by casting like so:

statusPrinter(status as StatusesType)

For further information, please refer to:

Typescript: cast an object to other type

Answer 5

Answer №3

To achieve this, you can use an iterator function like the following example:

function iterateOverMap<T, K extends keyof T>(map: T, callback: (key: keyof T, value: T[K]) => void) {
  Object.keys(map).forEach((key: K) => callback(key, map[key]));
}

iterateOverMap(STATUS_MAP, statusItem => {
    printStatus(statusItem);
});

Answer 6

To achieve this, you can use an iterator function like the following example:

function iterateOverMap<T, K extends keyof T>(map: T, callback: (key: keyof T, value: T[K]) => void) {
  Object.keys(map).forEach((key: K) => callback(key, map[key]));
}

iterateOverMap(STATUS_MAP, statusItem => {
    printStatus(statusItem);
});

Maintaining data types with Object.keys()

Answer №1

Answer №2

For further information, please refer to:

Answer №3

Similar questions

Incorporate a background image into mat-dialog

Convention for Naming Files in Typescript

To dismiss a popup on a map, simply click on any area outside the map

Identifying Shifts in Objects Using Angular 5

MUI DataGrid Identifying Duplicate Rows

Design a unique TypeScript index type with properties `[key of Y]: Partial<X>` that, when paired with a `default: Partial<X>` property, do not remain partial themselves

In my experience with Angular 8, I have found that the ViewChild() method is successful when used with an array, but does not work

Guidelines for converting an array into checkboxes using React Native with TypeScript

Seamless database migrations using sequelize and typescript

Creating an overloaded callable interface using TypeScript

Tips for creating dynamic amd-dependencies in TypeScript

You can only import Global CSS from your Custom <App> and not from any other files

Angular validation is malfunctioning for fields that have names ending with periods

Expanding a class in Typescript by adding a function with the same name but varying properties and types

Exploring the functionality of two-way data binding in Angular - a beginner's guide

Viewing an image from a local file on a web browser

When I try to install dependencies with Hardhat, the "Typechain" folder does not appear in the directory

Creating a typescript array with values matching keys in an object: How to do it?

What is the correct method for retrieving a specific child element in React?

Utilizing Angular 7 to extract data from the initial column of an Excel spreadsheet and store it within an array