Guide to updating all object values in Typescript

I am working with an object that looks like this:

enum FeatureNames = {
  featureA = 'featureA',
  featureB = 'featureB',
  featureC = 'featureC'
}

interface FeatureDetails {
  on: boolean;
}

type Features = Record<FeatureNames,FeatureDetails>;

const myObj: Features = {
  [FeatureNames.featureA]: {
    on: true
  },
  [FeatureNames.featureB]: {
    on: false
  },
  [FeatureNames.featureC]: {
    on: false
  }
}

How do I go about updating all the values in myObj so that the on value is set to true?

If I was not using typescript, I would have used reduce. However, I encountered an error when attempting to do so.

This is the error message I received:

Element implicitly has an 'any' type because an expression of type 'string' cannot be used to index type 'Record'. No index signature with a parameter of type 'string' was found on type 'Record'.ts(7053)

Answer №1

To ensure type safety, you can explicitly cast the key argument inside the reduce function like this:

Object.keys(myObj).reduce((obj, key) => (obj[key as FeatureNames].on = true, obj), myObj)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to efficiently manage multiple input fields with a single ref in React using TypeScript

I'm attempting to use the same reference for multiple input fields in my form. However, when I log it, the ref only points to the first input field. Is there a way I can share the same ref across different inputs? import React, {FC, useEffect, useRef, ...

What could be causing the countdown timer to speed up unexpectedly?

Currently, I am developing a quiz application. At the moment, I need to implement the following features: Countdown timer Questions Question Choices The countdown timer for each question functions properly as long as the answer button is not clicked or ...

I am looking to display data in Angular based on their corresponding ids

I am facing a scenario where I have two APIs with data containing similar ids but different values. The structure of the data is as follows: nights = { yearNo: 2014, monthNo: 7, countryId: 6162, countryNameGe: "რუსეთის ...

What is the reason behind the never return value in this typescript template?

As demonstrated in this example using TypeScript: Access TypeScript Playground type FirstOrSecond<condition, T1, T2> = condition extends never ? T1 : T2 type foo = never extends never ? () => 'hi' : (arg1: never) => 'hi' ...

What is the reason behind eslint not permitting the rule option @typescript-eslint/consistent-type-imports?

Upon implementing the eslint rule, I configured it like this. module.exports = { rules: { "@typescript-eslint/consistent-type-imports": [ "error", { fixStyle: "inline-type-imports" ...

Encountering an issue while trying to import the instanceMethods function within Sequelize

In a file, I have written a function and exported it like this: export function foo(params...) { // do something } When initializing the model, I imported the function in the following manner: import { foo } from "../path/..." instanceMethods: { foo ...

Error message occurs during compilation of basic Vue file in Webpack

When I execute webpack watch in the VS2017 task runner, it displays the following error: ERROR in ./wwwroot/js/src/App.vue Module build failed: SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) ...

Using a static value in the comparator is necessary for Array.find to function properly in Typescript

Looking to retrieve an item from an array: const device = this.selectedDevtype.devices.find(item => console.log(this.deviceID); return item.device_id === this.deviceID; }); console.log(device); When this.deviceID is logged, it shows "4", but t ...

Is it possible to generate a new union type by extracting values from an existing union type?

type Cartoon = { kind: 'cat', name: 'Tom'} | { kind: 'mouse', name: 'Jerry' } type Animal = 'cat' | 'mouse' // I am trying to figure out how to create the type Animal based on the values of kin ...

If the parameter type is "never", the ReturnType will be "any"

short tale const xyz = (a:never):number=>1 type b = ReturnType< typeof xyz> //any const xyz2 = (a:number, b:never):number=>1 type b2 = ReturnType< typeof xyz2> //any playground If any parameter type is never, the ReturnType becom ...

Tips for implementing Material-UI components in a .ts file

I am currently working on some .ts files for mocks, and I have a question about inserting MUI elements such as the Facebook icon. export const links: Link[] = [ { url: "https://uk-ua.facebook.com/", **icon: <Facebook fontSize ...

Is there a way to conceal an element within a component based on the current component being used with the router?

I have managed to hide an entire component, but I am unsure of how to show or hide specific elements within a component. export class AppComponent { headerFooterVisible: boolean; constructor(private router: Router) { router.events.subscribe(e =&g ...

Error in TypeScript when accessing object using string variable as index

Currently, I am facing a challenge in my project where I am dynamically generating routes and managing them in an Elysia(~Express) application. The issue arises when TypeScript's type checking system fails to index an object using a string variable. S ...

The parameter cannot be assigned the readonly type 'X' in this context

I encountered an issue with a third-party library where the class structure changed. Initially, it was defined as: export class Foo { field: X[]; …. } In my code, I was working with this type: print(foo.field) After updating to a new version, the c ...

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

Experimenting with different techniques such as performance.now() or new Date().getTime() has been done in order to monitor the processing time of every function/method. However, specifying these methods within each function for time calculation purposes h ...

The error message indicates that providing a number type instead of a string type to a parameter is causing an issue

This is my code snippet const currentTimeStamp = `${(parseInt(Date.now() / 1000))}`; const [roomName, setRoomName] = useState<string>(currentTimeStamp || ''); When running in production: An error occurs stating: Argument of type ' ...

Exporting Modules in ES6 and beyond

Transitioning from the Java world, I am venturing into creating a vanilla JS (ES2018) Application with types documented in JSDOC. By using the TypeScript compiler, I aim to generate clean definition files that can be bundled with my app. With just two main ...

Recursively map elements of a TypeScript array to keys of an object

I am looking to create a structured way to specify paths for accessing objects, ensuring that the path is correctly typed based on the object type. Let me illustrate with an example. Consider the following data: const obj = { name: 'Test', ...

Is there a way to subscribe to various observables simultaneously in Angular 2, and then pause until fresh data is available on each of them?

I have an Angular component that relies on 3 services, each of which has an observer I can subscribe to. The view of the component needs to be updated whenever there are changes in the observed data, which occurs through websockets (feathers.js). I want th ...

Is there a way to carry out tests on keydown events within Jasmine by specifying the keyCode within an Angular2+

I am working on a project where I need to trigger keydown events on an <input> field. Tools Used Karma v1.7.1 as the test runner Tests running on Chrome browser Using Angular 5 framework Any insights on how I can achieve this? ...