Encountering a TypeScript issue with bracket notation in template literals

Question

Encountering a TypeScript issue with bracket notation in template literals

I am encountering an issue with my object named endpoints that contains various methods:

const endpoints = {
  async getProfilePhoto(photoFile: File) {
    return await updateProfilePhotoTask.perform(photoFile);
  },
};

To access these methods, I am using a function that takes a string argument to construct a template literal and then accesses the method through bracket notation:

export const useApiTask = (
  endpointName: string,
) => {
  //const apiActionName = 'getProfilePhoto'; // Strings work fine
  const apiActionName = `get${endpointName}`; // However, template literals cause a TypeScript error
  const endpointHandler = endpoints[apiActionName]; // This is where the TypeScript error occurs
}

The use of template literals triggers a TypeScript error on

endpointHandler = endpoints[apiActionName]

:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ getProfilePhoto(photoFile: File): Promise<string | undefined>; }'.
  No index signature with a parameter of type 'string' was found on type '{ getProfilePhoto(photoFile: File): Promise<string | undefined>; }'. ts(7053)

Do you have any insight into what might be causing this issue?

typescript

Answer 1

Answer №1

There are a couple of concerns regarding this code snippet. Initially, the variable endpointName cannot be just any arbitrary string; it must correspond to a valid key within the endpoints object (excluding the get prefix). Therefore, we need to define a more specific type for it. Secondly, even if endpointName is a combination of valid keys, the result of the literal operation will default to string unless we explicitly specify to TypeScript that we require a more precise type using as const:

const endpoints = {
  async getProfilePhoto(photoFile: File) {
    return await Promise.resolve();
  },
  async getProfile(photoFile: File) {
    return await Promise.resolve();
  },
};

export const useApiTask = (
  endpointName: 'ProfilePhoto' | 'Profile', // Union of possible values
) => {
  const apiActionName = `get${endpointName}` as const;  // Ensure preservation of type information
  const endpointHandler = endpoints[apiActionName]; 
}

Playground Link

You could leverage conditional types to extract the union of names and prevent redundant naming:

type EndpointNames = keyof typeof endpoints extends `get${infer Name}` ? Name : never

Playground Link

Answer 2

There are a couple of concerns regarding this code snippet. Initially, the variable endpointName cannot be just any arbitrary string; it must correspond to a valid key within the endpoints object (excluding the get prefix). Therefore, we need to define a more specific type for it. Secondly, even if endpointName is a combination of valid keys, the result of the literal operation will default to string unless we explicitly specify to TypeScript that we require a more precise type using as const:

const endpoints = {
  async getProfilePhoto(photoFile: File) {
    return await Promise.resolve();
  },
  async getProfile(photoFile: File) {
    return await Promise.resolve();
  },
};

export const useApiTask = (
  endpointName: 'ProfilePhoto' | 'Profile', // Union of possible values
) => {
  const apiActionName = `get${endpointName}` as const;  // Ensure preservation of type information
  const endpointHandler = endpoints[apiActionName]; 
}

Playground Link

You could leverage conditional types to extract the union of names and prevent redundant naming:

type EndpointNames = keyof typeof endpoints extends `get${infer Name}` ? Name : never

Playground Link

Answer 3

Answer №2

The reason for this error occurring is due to the keys in typeof endpoints not being of type string, but instead the literal string "getProfilePhoto" (as shown in your example).

To solve this issue, a clever technique called template literal inference can be used to derive the type of key names in your endpoints that match the pattern of "strings starting with get". This derived type can then be applied to the endpointName parameter like so:

TS Playground

declare const updateProfilePhotoTask: { perform (file: File): Promise<unknown>; };

const endpoints = {
  async getProfilePhoto(photoFile: File) {
    return await updateProfilePhotoTask.perform(photoFile);
  },
  getANumber() {
    return Math.random();
  },
  getThisProp: 'hello',
};

// This results in "ProfilePhoto" | "ANumber"
type EndpointFunctionNamesPrefixedByGet = typeof endpoints extends infer T ? keyof { [
  K in keyof T as K extends `get${infer Name}` ?
    T[K] extends (...params: any) => any ? Name : never
    : never
]: unknown; } : never;

export const useApiTask = (endpointName: EndpointFunctionNamesPrefixedByGet) => {
  const endpointHandler = endpoints[`get${endpointName}`];
}

Answer 4

The reason for this error occurring is due to the keys in typeof endpoints not being of type string, but instead the literal string "getProfilePhoto" (as shown in your example).

To solve this issue, a clever technique called template literal inference can be used to derive the type of key names in your endpoints that match the pattern of "strings starting with get". This derived type can then be applied to the endpointName parameter like so:

TS Playground

declare const updateProfilePhotoTask: { perform (file: File): Promise<unknown>; };

const endpoints = {
  async getProfilePhoto(photoFile: File) {
    return await updateProfilePhotoTask.perform(photoFile);
  },
  getANumber() {
    return Math.random();
  },
  getThisProp: 'hello',
};

// This results in "ProfilePhoto" | "ANumber"
type EndpointFunctionNamesPrefixedByGet = typeof endpoints extends infer T ? keyof { [
  K in keyof T as K extends `get${infer Name}` ?
    T[K] extends (...params: any) => any ? Name : never
    : never
]: unknown; } : never;

export const useApiTask = (endpointName: EndpointFunctionNamesPrefixedByGet) => {
  const endpointHandler = endpoints[`get${endpointName}`];
}

Encountering a TypeScript issue with bracket notation in template literals

Answer №1

Answer №2

Similar questions

Attempting to invoke a promise within a function yields an error message stating that it lacks call signatures

Start a new typescript project from scratch

Tips for extracting key values from an array of objects in Typescript

Vue defineProps allows for the definition of complex types for properties

When canActivate returns false, the screen in Angular 2 will still be accessed

Mapping an array based on its individual values

The assets path is the directory within the installed package that houses the main application files following the completion of a

What is the process of extending a class in TypeScript?

What are the steps to integrate TypeScript into JavaScript code?

The specified main access point, "@angular/cdk/platform", is lacking in required dependencies

Versatile Typescript options

What is the proper way to implement an if-else statement within objects?

How can I configure React Router V6 to include multiple :id parameters in a Route path, with some being optional?

Changing the Class of an Element in a Different Component with Angular 2+

Jasmine and Karma encountered a TypeError stating that the function this.role.toLowerCase is not valid

The intended 'this' keyword is unfortunately replaced by an incorrect '

Error: The absence of an element identified by the locator does not cause the protractor spec to fail, but rather it executes successfully

The expanded interfaces of Typescript's indexable types (TS2322)

Unable to retrieve the value from the nested formGroup

Having difficulty choosing a default value from the Angular dropdown menu