Function for setting specific properties in a Typescript interface

I need help with writing types for a function in TypeScript. I have an interface called "Example" with properties 'num' and 'str'. I want to create a function that takes a key (property name from Example) and a new value for that key. However, my current code is not working as expected.

interface Example {
  num: number;
  str: string;
}

const obj: Example = {
  num: 5,
  str: '123'
}

const setExampleProp = ({key, value}: {
  key: keyof Example;
  value: Example[keyof Example];
}) => {
  obj[key] = value
}

Error: Type 'string | number' is not assignable to type 'never'. Type 'string' is not assignable to type 'never'.

Answer №1

Transform it into a universal function

function updateProperty<P extends keyof Common>({label, content}: {
  label: P;
  content: Common[P];
}) {
  obj[label] = content
}

Answer №2

That response is considered correct.

One alternative method could involve including an index signature in the interface like so:

interface Sample {
  numberValue: number;
  stringValue: string;

  [keyName: string]: Sample[keyof Sample];
}

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

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

Pay attention to modifications in a property within an object in the React environment

Below is a React Context Provider containing a simple Counter class with methods stored in the context. import { createContext, useContext } from "react"; class Counter { public count: number = 0; getCount = () => { return this.count ...

Change an ISO date format to DD:MM:YYYY HH:MM using Angular

I currently have my date in this format: 2022-11-21T21:07:56.830-07:00 However, I am looking to convert it to the following format: 21/11/2022 07:56 ...

Show variable outside callback function - Ionic2

When working with ionic2, I encountered a situation where I needed to pass a variable from an asynchronous method to my template and other methods within the component file. In the `ngOnInit` method of my controller, I have the following code: ngOnInit() ...

How can I access members outside of a class without a name in Typescript?

I recently developed an "anonymous" class inspired by this insightful discussion on Typescript anonymous classes. However, I'm facing a challenge in accessing the outer scope members. Here's a snippet of my code for context: class BaseCounter { ...

Having difficulty retrieving data from Firestore due to issues with the date field

Retrieving data from Firestore, but encountering an issue with the date field Date Created: Timestamp Nanoseconds: 518000000 Seconds: 1722162236 [[Prototype]]: Object Dislikes: 1 const documentSnapshot = await getDocumentSnapshot(documentReference); i ...

What could be the reason for passport.serializeUser function not being available?

After spending nearly an hour searching, I am still unable to pinpoint the issue in my code. Not only have I failed to find a solution online, but reaching out for help in coding communities on Discord has also been futile as no one seems to know why this ...

Creating an additional attribute for a specific object type without needing to use any runtime code

type FormerActionsCustom = | { type: "ACTION_1" payload: string } | { type: "ACTION_2" payload: number } type CustomConverter = ... type UpdatedActions = CustomConverter<FormerActionsCustom, "group", "SECTION"> ...

Named functions in Typescript within functional components are the best practice for improving

How can I implement handleFoo using MyType['foo']? type MyType { foo: () => void } const Comp: React.FunctionComponent<{}> = () => { function handleFoo() {} return ... } I'm looking for a solution that doesn't inv ...

Define two categories within the Attributes interface

To avoid theme-ui errors in the sx prop, I need to declare both of these statements: declare module "react" { interface Attributes { sx?: ThemeUIStyleObject; } } and declare module "react" { interface Attributes { sx?: Sx ...

Error encountered during Angular production build: Attempting to assign value to a reference or variable not possible

Encountering issues building the production version of my Angular app. The IDE console only displays this message: ERROR in Cannot assign to a reference or variable! To successfully build, I need to include these options: --aot=false --buildOptimizer ...

Implementing Angular 2 - Steps to ensure a service is accessible within the app module

I'm running into an issue trying to utilize a function within a service that I believed was globally accessible. The service in question is named SavedNotificationService: import { Injectable } from '@angular/core'; @Injectable() export cl ...

When a class decorator is returned as a higher-order function, it is unable to access static values

Check out this showcase: function Decorator(SampleClass: Sample) { console.log('Inside the decorator function'); return function (args) { console.log('Inside the high order function of the decorator: ', args); let sample = ...

Chart.js Axis Labels Orientation Guidelines

I am currently utilizing chart.js within an Angular 8 environment using Primeng. I am looking to customize the options for my chart as follows: For the y-axis ticks, set textDirection to 'ltr' For the x-axis ticks, set textDirection to 'rtl ...

Reactify TypeScript: Accurate typings for onChange event

How can I resolve the issues with types for target: { value: any, name: any }? The errors I encounter include Duplicate identifier 'any'. and Binding element 'any' implicitly has an 'any' type.. Additionally, why does the erro ...

Is there a way to turn off linting while utilizing vue-cli serve?

I am currently running my project using vue-cli by executing the following command: vue-cli-service serve --open Is there a way to stop all linting? It seems like it's re-linting every time I save, and it significantly slows down the process of ma ...

How can I group every 3 elements in a div using React?

I've been trying to achieve a layout where there are 3 red divs enclosed within a blue div. However, despite following the suggested method from https://stackoverflow.com/questions/63695426/react-wrap-every-3-components-into-a-div, I'm unable to ...

Angular: Unable to locate route declaration in the specified path /src/app/app-routing.module.ts

Whenever I attempt to set up automatic routing for components that have been created using the command below ng generate module orders --route orders --module app.module I encounter the following error message The requested URL /src/app/app-routing.mod ...

Take action once the Promise outside of the then block has been successfully completed

Presented below is the code snippet: function getPromise():Promise<any> { let p = new Promise<any>((resolve, reject) => { //some logical resolve(data); }); p.finally(()=>{ //I want do something when ou ...

Take out a specific element from an array consisting of multiple objects

I have a specific array structure and I need to remove elements that match a certain criteria. Here is the initial array: const updatedUsersInfo = [ { alias: 'ba', userId: '0058V00000DYOqsQAH', username: '<a href=" ...