The data type '{ [key: string]: number; }' cannot be assigned to type 'T'

Question

The data type '{ [key: string]: number; }' cannot be assigned to type 'T'

I’m working with a complex TypeScript type and trying to manage it within a function. Here’s what I have:

type T = { a: number } | { b: number }

function func(k: 'a' | 'b', v: number) {
    // error message below
    const t: T = { [k]: v }
    console.log(t);
}

However, I encountered an error:

Type '{ [x: string]: number; }' is not assignable to type 'T'.
  Property 'b' is missing in type '{ [x: string]: number; }' but required in type '{ b: number; }'.

Any ideas on how to resolve this issue?

typescript

Answer 1

Answer №1

When setting dynamic keys on its own, the typing is lost, but this can be avoided by defining an explicit type using another function:

function put<K extends PropertyKey, V>(key: K, value: V): {[P in K]: V};
function put<K extends PropertyKey, V>(key: K, value: V) {
  return {[key]: value};
}

Example of usage:

function func(k: "a" | "b", v: number) {
  const t: T = put(k, v); // no error
  console.log(t);
}

Playground Link

Answer 2

When setting dynamic keys on its own, the typing is lost, but this can be avoided by defining an explicit type using another function:

function put<K extends PropertyKey, V>(key: K, value: V): {[P in K]: V};
function put<K extends PropertyKey, V>(key: K, value: V) {
  return {[key]: value};
}

Example of usage:

function func(k: "a" | "b", v: number) {
  const t: T = put(k, v); // no error
  console.log(t);
}

Playground Link

The data type '{ [key: string]: number; }' cannot be assigned to type 'T'

Answer №1

Similar questions

I am currently analyzing a JSON file that contains deeply nested JavaScript Objects. My goal is to rearrange the data so that objects containing a specific field value are placed at the top of the list

Using @RequestBody with a Map<String, String>[] in Spring Boot results in a collection of blank elements

Utilize React.useImperativeHandle() for declaring custom types

Guide on how to include jquery-ui css file in Vue3

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

The Next.js build encountered an error - unable to locate function in next/script module

Put Jest to the test by testing the appendFileSync function

Understanding Typescript in Next.js components: Deciphering the purpose behind each segment

Encountering a warning message in Vue 3 Migration Build using Typescript: Error in finding export 'default' (imported as 'Vue') within the 'vue' package

Exploring the Observable object within Angular

The Angular 11 library module has been successfully imported into the consuming app but it is not being utilized

Altering the dimensions of radio buttons

Is there a TypeScript rule called "no-function-constructor-with-string-args" that needs an example?

How to successfully utilize TypeScript ES6 modules and RequireJS for registering Angular elements

Having difficulty importing SVG files in TypeScript

The specified property cannot be found on the object type in a Svelte application when using TypeScript

Issue encountered: "ERROR TypeError: Upon attempting to patchValue in ngOnInit(), the property 'form' is undefined."

Ways in which this data can be best retrieved

Issue: The function (0, react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not recognized as a valid function or its output is not iterable

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second