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

Erase Typescript Service

How can one access DOM elements (getting and setting values) that are nested within an *ngFor loop?

No data being displayed or returned from API when using async await

What is the importance of including "declare var angular" while working with Typescript and AngularJS?

Are there any alternatives to ui-ace specifically designed for Angular 2?

Having trouble with @typescript-eslint/member-ordering feature not functioning properly?

Guide on exporting a submodule within a TypeScript package

What steps can I take to stop Vetur and TypeScript from displaying duplicate TypeScript warnings in VSCode?

Struggling to retrieve data with arrow function in Vue

What is the best way to ensure that two promises are both resolved before triggering a function from within a promise?

Creating an enum in TypeScript can be accomplished by using the enum

No types are assigned to any props

The Angular firestore is showing an error stating that the property 'toDate' is not found in the 'Date' type

Type of event target MouseEvent

Angular input box with integrated datepicker icons displayed inside

Angular 5's data display glitch

The step-by-step guide to fixing a Gigwage client eslint error using nestJS

What is the best way to add all IDs to an array, except for the very first one

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

Enhancing Responses in NestJS with External API Data