Typescript may struggle with identifying indexed types accurately

Question

Typescript may struggle with identifying indexed types accurately

type X = {
  aa: string;
  bb: number;
};

const get = <Key extends keyof X, Value extends X[Key]>(
  key: Key,
  value: Value | ((v: Value) => Value)
) => {
  let newValue: Value;
  const x: X = {
    aa: '11',
    bb: 11
  };
  if (typeof value === 'function') {
    //Issue with type assignment: 'Argument of type 'X[Key]' is not assignable to parameter of type 'Value'.
    newValue = value(x[key]);
  } else {
    newValue = value;
  }
};

What could cause the error message "Argument of type 'X[Key]' is not assignable to parameter of type 'Value'?" When looking at it from a logical perspective X[Key] should match what Value represents. So why does TypeScript interpret it as not assignable? As a person analyzing the types, it seems impossible to make an error in type determination. Why is TypeScript unable to recognize this?

typescript

Answer 1

Answer №1

interface MyType {
  name: string;
  age: number;
};

const fetchData = <T extends keyof MyType>(
  key: T,
  data: MyType[T] | ((value: MyType[T]) => MyType[T])
) => {
  let updatedData: MyType[T];
  const obj: MyType = {
    name: 'John Doe',
    age: 30
  };
  if (typeof data === 'function') {
    // Implementation ready
    updatedData = data(obj[key]);
  } else {
    updatedData = data;
  }
};

Answer 2

interface MyType {
  name: string;
  age: number;
};

const fetchData = <T extends keyof MyType>(
  key: T,
  data: MyType[T] | ((value: MyType[T]) => MyType[T])
) => {
  let updatedData: MyType[T];
  const obj: MyType = {
    name: 'John Doe',
    age: 30
  };
  if (typeof data === 'function') {
    // Implementation ready
    updatedData = data(obj[key]);
  } else {
    updatedData = data;
  }
};

Answer 3

Answer №2

fetch<'xx' | 'yy', string | number>('xx', 2)

is considered a legitimate call

Originally, I planned to not specify any generic parameters and rely on TypeScript's automatic binding, unaware of the potential for malicious generic parameters to be supplied.

Answer 4

fetch<'xx' | 'yy', string | number>('xx', 2)

is considered a legitimate call

Originally, I planned to not specify any generic parameters and rely on TypeScript's automatic binding, unaware of the potential for malicious generic parameters to be supplied.

Typescript may struggle with identifying indexed types accurately

Answer №1

Answer №2

Similar questions

Creating a .d.ts file for a JavaScript file that exports a plain object - tips and best practices

A step-by-step guide on integrating Azure Cognitive Search within a SharePoint Online SPFx webpart

What is the process for extracting the "path expression" from an interface in TypeScript?

Utilizing the Composition Root concept in a TypeScript Express application

Exploring the power of RxJs through chaining observers

The W3C Validator has found a discrepancy in the index.html file, specifically at the app-root location

Tips for correctly decorating constructors in TypeScript

Put Jest to the test by testing the appendFileSync function

Unable to utilize the namespace 'RouteComponentProps' as a specified type

When trying to link "/%PUBLIC_URL%/manifest.json" within the workspace, the process failed due to an incorrectly formatted URI while operating on Netlify

Receiving a Typescript error stating "Property '0' does not exist on type X" when incorporating auto-generated GraphQL code into the project

Exploring the utilization of an interface or class in Typescript

Using Twitch OAuth with Nebular in Angular

Typescript encountering onClick function error during the build process

Transmitting a base64 data URL through the Next.js API route has proven to be a challenge, but fortunately, other forms of

Combine form data from a reactive form into a string using interpolation

Can we modify the auto-import format from `~/directory/file` to `@/directory/file`?

Is there intellisense support for Angular 2 templates in Visual Studio?

Utilizing Regular Expressions as a Key for Object Mapping

What are the steps for creating a standalone build in nextJS?