Custom "set attribute" feature in TypeScript

Question

Custom "set attribute" feature in TypeScript

One issue I faced was resolved by creating the function shown below :

function setProperty<T extends Record<string, string>>(obj: T, key: keyof T) {
  obj[key] = "hello";
}

However, when I tried to compile the code, I encountered an error with obj[key] highlighted in red and the following message displayed :

Type 'string' is not assignable to type 'T[keyof T]'.ts(2322)

I believe this error is due to the usage of the keyword "extends" but I am unsure how to resolve it.

Any guidance on this matter would be greatly appreciated. Thank you!

typescript generics typescript-generics

Answer 1

Answer №1

If you are facing a problem, there are two different approaches to solve it based on your scenario. If your goal is simply to assign any string as a value to a specific key without the need for generics:

function setProperty(obj: Record<string, string>, key: string) {
  obj[key] = "hello";
}

However, if your object has predefined keys and values, you can utilize generics to ensure type safety in your code:

function setProperty<T extends Record<string, string>, K extends keyof T, V extends T[K]>(obj: T, key: K, value: V) {
  obj[key] = value
}

type ObjectValue = 'foo' | 'bar'

type A = {
  foo: ObjectValue,
  baz: 'baz'
}

const a: A = {
  foo: 'foo',
  baz: 'baz'
}

setProperty(a, 'foo', 'bar') // works
setProperty(a, 'foo', 'baz') // type error

This approach also provides the advantage of InteliSense suggestions.

EDIT:

As per the OP's request for type checking the key and setting an arbitrary string, this revised solution should be more suitable:

function setProperty<K extends string>(obj: Record<K, string>, key: K) {
  obj[key] = "hello";
}

Answer 2

If you are facing a problem, there are two different approaches to solve it based on your scenario. If your goal is simply to assign any string as a value to a specific key without the need for generics:

function setProperty(obj: Record<string, string>, key: string) {
  obj[key] = "hello";
}

However, if your object has predefined keys and values, you can utilize generics to ensure type safety in your code:

function setProperty<T extends Record<string, string>, K extends keyof T, V extends T[K]>(obj: T, key: K, value: V) {
  obj[key] = value
}

type ObjectValue = 'foo' | 'bar'

type A = {
  foo: ObjectValue,
  baz: 'baz'
}

const a: A = {
  foo: 'foo',
  baz: 'baz'
}

setProperty(a, 'foo', 'bar') // works
setProperty(a, 'foo', 'baz') // type error

This approach also provides the advantage of InteliSense suggestions.

EDIT:

As per the OP's request for type checking the key and setting an arbitrary string, this revised solution should be more suitable:

function setProperty<K extends string>(obj: Record<K, string>, key: K) {
  obj[key] = "hello";
}

Answer 3

Answer №2

Simply utilize the Object.assign method.

type StringValue<Obj> = {
    [Prop in keyof Obj]: Obj[Prop] extends string ? Prop : never
}[keyof Obj]

/**
 * Retrieve all keys with string values
 * Only these keys are permitted
 */
type Result = StringValue<{ age: number, name: string }> // name

function setProperty<
    Value,
    Obj extends Record<string, Value>
>(obj: Obj, key: StringValue<Obj>) {
    Object.assign(obj, { [key]: 'hello' })
}

const user = {
    age: 42,
    name: 'John',
    surname: 'Doe'
}

setProperty(user, 'name') // okay
setProperty(user, 'surname') // alright alright

setProperty(user, 'age') // expected error, as age is a number

By utilizing the StringValue utility type, TS will only permit keys with string values.

Playground

Please attempt to avoid mutations in TS. Refer to this article for more information.

Answer 4

Simply utilize the Object.assign method.

type StringValue<Obj> = {
    [Prop in keyof Obj]: Obj[Prop] extends string ? Prop : never
}[keyof Obj]

/**
 * Retrieve all keys with string values
 * Only these keys are permitted
 */
type Result = StringValue<{ age: number, name: string }> // name

function setProperty<
    Value,
    Obj extends Record<string, Value>
>(obj: Obj, key: StringValue<Obj>) {
    Object.assign(obj, { [key]: 'hello' })
}

const user = {
    age: 42,
    name: 'John',
    surname: 'Doe'
}

setProperty(user, 'name') // okay
setProperty(user, 'surname') // alright alright

setProperty(user, 'age') // expected error, as age is a number

By utilizing the StringValue utility type, TS will only permit keys with string values.

Playground

Please attempt to avoid mutations in TS. Refer to this article for more information.

Answer 5

Answer №3

Not entirely certain if this method will yield the desired outcome for your particular situation, but if your goal is simply to ensure compilation, a type assertion can be used.

function setProperty<T extends Record<string, string>>(obj: T, key: keyof T) {
  obj[key] = "hello" as T[keyof T];
}

The literal value "hello" has a specified type of hello. By explicitly asserting this in TypeScript, it indicates to the compiler that you intend to assign a value to obj, which contains keys of type keyof T. Without this assertion, the compiler may not recognize hello as the correct type.

For setting the value of obj[key] to hello, following Michael Vrana's initial suggestion would be my preferred approach.

Answer 6

Not entirely certain if this method will yield the desired outcome for your particular situation, but if your goal is simply to ensure compilation, a type assertion can be used.

function setProperty<T extends Record<string, string>>(obj: T, key: keyof T) {
  obj[key] = "hello" as T[keyof T];
}

The literal value "hello" has a specified type of hello. By explicitly asserting this in TypeScript, it indicates to the compiler that you intend to assign a value to obj, which contains keys of type keyof T. Without this assertion, the compiler may not recognize hello as the correct type.

For setting the value of obj[key] to hello, following Michael Vrana's initial suggestion would be my preferred approach.

Custom "set attribute" feature in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

It's possible that the "device.interfaces" variable has not been defined

Implementing data waiting strategy in Vue component using TypeScript for rendering

What could be causing my React Redux state to not trigger a re-render?

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs

Avoid accessing members in Vue 3 using TypeScript that may be unsafe

Utilizing ternary operators in Angular 6 tables

Out of nowhere, encountering TS2322 Typescript errors, causing type mismatches during the compilation phase

Troubleshooting image loading issues when updating the base URL in an Angular JS project

Comprehending the concept of TypeScript type assertion

Find out if a dynamically imported component has finished loading in Nextjs

Error message stating: "The 'MktoForms2' property is not recognized within the scope of 'Window & typeof globalThis'."

Visual Studio 2017, ASP.NET framework, Typescript programming language, and node package manager

Creating, editing, and deleting data in Ng2 smart table is a seamless process that can greatly enhance

Guide to setting up a Cordova and TypeScript project using the command line interface

Is it correct to implement an interface with a constructor in TypeScript using this method?

Handlebar files are not compatible with Typescript loading capabilities

Trouble retrieving query parameters from a URL while trying to access URL parameters from a module

Steps for configuring type definitions for an Apollo error response

ExitDecorator in TypeScript

Error with Typescript types when using Styled Components