Looking for a TypeScript annotation that allows accessing an object property using a variable

Question

Looking for a TypeScript annotation that allows accessing an object property using a variable

When working with plain JavaScript, we have the ability to access an object's property value using a variable.

For example, this is permitted:

let obj = { a: 100, b: 'Need help with TypeScript', c: new Date() };
let prop = 'b';
console.log( obj[prop] );  // Need help with TypeScript

However, when introducing TypeScript and declaring prop as a string, it may lead to an index error as shown below.

let obj: object = { a: 100, b: 'Need help with TypeScript', c: new Date() };
let prop: string = 'b';
console.log( obj[prop] );  // TypeScript error element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.

What would be the correct way to annotate the code above?

Edit Dec. 9, 2019: When initially posting the question, I assumed there would be a general solution that isn't solely reliant on my specific object example.

In my scenario, I have a function that takes a property name as an argument. This function is responsible for sorting an array based on the provided property name. The original JavaScript code I'm migrating to TypeScript is capable of sorting any array of objects.

typescript

Answer 1

Answer №1

It is advised to avoid using object as a type in TypeScript, as it can lead to ambiguity.

Instead, consider defining a specific type that clearly specifies the structure of your data:

let obj: { [key: string]: number } = { a: 100, b: 200, c: 300 };
let prop: string = 'b';
console.log(obj[prop]);

To further refine your type definition, you can utilize the [key in type] syntax with a custom type:

type props = 'a' | 'b' | 'c';
let obj: { [key in props]: number } = { a: 100, b: 200, c: 300 };
let prop: props = 'b';
console.log(obj[prop]);

For a more advanced approach, you can utilize interfaces for better organization and access using the keyof operator:

interface IProps{
  a: number,
  b: number,
  c: number
}
let obj: { [key in keyof IProps]: number} = { a: 100, b: 200, c: 300 };
let prop: keyof IProps = 'b';
console.log(obj[prop]);

This last example serves as a demonstration and reference rather than a definitive solution to the initial issue raised by the OP.

Answer 2

It is advised to avoid using object as a type in TypeScript, as it can lead to ambiguity.

Instead, consider defining a specific type that clearly specifies the structure of your data:

let obj: { [key: string]: number } = { a: 100, b: 200, c: 300 };
let prop: string = 'b';
console.log(obj[prop]);

To further refine your type definition, you can utilize the [key in type] syntax with a custom type:

type props = 'a' | 'b' | 'c';
let obj: { [key in props]: number } = { a: 100, b: 200, c: 300 };
let prop: props = 'b';
console.log(obj[prop]);

For a more advanced approach, you can utilize interfaces for better organization and access using the keyof operator:

interface IProps{
  a: number,
  b: number,
  c: number
}
let obj: { [key in keyof IProps]: number} = { a: 100, b: 200, c: 300 };
let prop: keyof IProps = 'b';
console.log(obj[prop]);

This last example serves as a demonstration and reference rather than a definitive solution to the initial issue raised by the OP.

Looking for a TypeScript annotation that allows accessing an object property using a variable

Answer №1

Similar questions

Visual Studio - TypeScript project synchronization issue

Theme not being rendered properly following the generation of a dynamic component in Angular

TypeScript application was constructed with incorrect imports from the src folder instead of the dist folder

Handlebar files are not compatible with Typescript loading capabilities

Utilizing Typescript's baseUrl compiler configuration for node development

What is the best way to set up a property in a service that will be used by multiple components?

It is feasible to completely override a class in TypeScript

ERROR TS1086: A declaration of an accessor within an ambient context is not allowed. Accessor for firebaseUiConfig(): NativeFirebaseUIAuthConfig

Incorporate an HTML span element with an onclick function bound in Angular framework

How to Retrieve a Global Variable in an Angular Template

Incorporate the Input() component into your codebase and take advantage of its dot notation features, such as

summing 3 numbers to a total of 100 percent

The JavaScript function for converting a date to a local string in the format of DD MMM YYYY is causing an error message in the browser console stating that it is not a valid function

When using the Angular Material table with selection enabled, the master toggle functionality should always deselect the

What is the best way to represent a directory structure in JSON using a C# data type?

Ways to attain a similar format - input map

Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

Mastering unit testing with Behaviour Subjects in Angular

`How to utilize the spread operator in Angular 4 to push an object to a specific length`

Getting a "module not found" error in Next.js while trying to import a TypeScript