The element is inferred to have the 'any' type. No index signature matching the parameter type 'string' was found on the 'User1' type

Question

The element is inferred to have the 'any' type. No index signature matching the parameter type 'string' was found on the 'User1' type

I have been experimenting with computed properties in TypeScript, but I've encountered a specific issue:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'User1'.
  No index signature with a parameter of type 'string' was found on type 'User1'

Below is the code snippet causing the error:

type User1 = {
  name: string;
  age: number;
  address: string;
};

const user1: User1 = {
  name: "user1",
  age: 23,
  address: "address",
};

let checkParameter: string | number = "name";
console.log(user1[checkParameter]); //error occurring here

checkParameter = "age";
console.log(user1[checkParameter]); //error occurring here

checkParameter = "address";
console.log(user1[checkParameter]); //error occurring here

The value of checkParameter is determined randomly at runtime.

I'm aiming for smooth execution without any errors.

javascript typescript javascript-objects typescript-typings

Answer 1

Answer №1

To specify that User1 type has properties with keys of type string, you can use [key: string]: string

type User1  = {
   [key: string]: string;
   name: string;
   age: number;
   address: string;
};

const user1: User1 = {
   name: "user1",
   age: 23,
   address: "address",
};

let checkKey: string | number = "name";
console.log(user1[checkKey]);

If the possible key types for User1 include both strings and numbers, you can update the type definition like this:

type User1  = {
   [key: string | number]: string
   name: string;
   age: number;
   address: string;
};

Answer 2

To specify that User1 type has properties with keys of type string, you can use [key: string]: string

type User1  = {
   [key: string]: string;
   name: string;
   age: number;
   address: string;
};

const user1: User1 = {
   name: "user1",
   age: 23,
   address: "address",
};

let checkKey: string | number = "name";
console.log(user1[checkKey]);

If the possible key types for User1 include both strings and numbers, you can update the type definition like this:

type User1  = {
   [key: string | number]: string
   name: string;
   age: number;
   address: string;
};

Answer 3

Answer №2

To address this issue, one method could be to modify the type for checkParameter by creating a union of string types that represent each property.

let checkParameter: "name" | "age" | "address" = "name"

An alternative approach as recommended by @jcalz is to use keyof User1 in order to dynamically access properties of object User1:

type User1 = {
  name: string;
  age: number;
  address: string;
};

const user1: User1 = {
  name: "User 1",
  age: 23,
  address: "123 First St",
};

let checkParameter: keyof User1 = "name";
console.log(user1[checkParameter]); // User 1

checkParameter = "age";
console.log(user1[checkParameter]); // 23

checkParameter = "address";
console.log(user1[checkParameter]); // 123 First St

Answer 4

To address this issue, one method could be to modify the type for checkParameter by creating a union of string types that represent each property.

let checkParameter: "name" | "age" | "address" = "name"

An alternative approach as recommended by @jcalz is to use keyof User1 in order to dynamically access properties of object User1:

type User1 = {
  name: string;
  age: number;
  address: string;
};

const user1: User1 = {
  name: "User 1",
  age: 23,
  address: "123 First St",
};

let checkParameter: keyof User1 = "name";
console.log(user1[checkParameter]); // User 1

checkParameter = "age";
console.log(user1[checkParameter]); // 23

checkParameter = "address";
console.log(user1[checkParameter]); // 123 First St

The element is inferred to have the 'any' type. No index signature matching the parameter type 'string' was found on the 'User1' type

Answer №1

Answer №2

Similar questions

Experiencing memory issues while attempting to slice an extensive buffer in Node.js

Tips for incorporating a multimedia HTML/JavaScript application within C++ programming

Steer clear of mentioning unbound methods, as they can lead to accidental scoping errors with 'this' when invoking static methods

Issues may arise in Typescript when trying to return an array of data from a redux createAsyncThunk function

VueJS refreshes components while preserving previous data

Encountering numerous errors when importing Wallet Connect / Web3 Provider

Navigate JSON Object - Prior Action

"Make a phone call following the completion of an HTTP

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

Leveraging a shared directory within an npm project

React-router can manage non-matching paths by utilizing a basic JavaScript router configuration

Leveraging the power of async to streamline the serialization of operations with numerous layers of callbacks in Node

The proper way to implement global scripts in Next.js

Trouble with displaying a custom marker on Google Maps API v3

Using Angular's ng-repeat to iterate through an array and display its objects within another array

Need to return to the previous page following submission

Using JavaScript, adding an element to an array results in the array returning a value of 1

The user keeps finding themselves redirected back to the Home page rather than the page they are trying

Make sure to concentrate on the input field when the DIV element is clicked

How can you extract the property names of the first object in an array of objects?