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

Retrieve the observable value and store it in a variable within my Angular 13 component

The Azure function encounters an AuthorizationFailure error while attempting to retrieve a non-public file from Azure Blob Storage

Creating a HTML element that functions as a text input using a div

Performing unit testing on a Vue component that relies on external dependencies

Using React MUI to implement a custom Theme attribute within a component

TypeScript properties for styled input component

What is the reason for a boolean extracted from a union type showing that it is not equivalent to true?

What other methods are available to verify null and assign a value?

The character 'T' cannot be assigned to the data type 'number'

Unable to export data from a TypeScript module in Visual Studio 2015 combined with Node.js

Verify the accuracy of each object in an array by comparing it to an enum and confirming its validity

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

The number in Typescript should fall between 0 and 1, inclusive

Tips for effectively utilizing a Query or QueryTask with local graphics (GraphicsLayer)

The TypeScript error message indicates that a value typed as 'string | undefined' cannot be assigned to a type 'string'

Storing string variables within an array and subsequently evaluating the similarity of each variable's value with those stored within the array

Using axiosjs to send FormData from a Node.js environment

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

Custom HTML binding in expanding rows of Angular 2 DataTables

Calling a function within another function