"Using an indexer in TypeScript allows for direct access to object properties by simply specifying the key within

Question

"Using an indexer in TypeScript allows for direct access to object properties by simply specifying the key within

I have a requirement to access an object property using a string as the key

interface MyObject {
  prop1: string;
  prop2: string;
  prop3: string;
  prop4: string;
  prop5: string;
} 

let initialValues: MyObject;

//I initialize some properties
initialValues = {
    prop1: 'xxxx',
    prop2: 'yyyy'
}

//I set values for additional (existing) properties 
[3,4,5,6].map(i => {
    initialValues[`prop${i}`] = 'zzzz';
});

Upon running this code, I encountered the following error message:

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'MyObject'

typescript ecmascript-6

Answer 1

Answer №1

When working with [3,4,5,6], Typescript automatically assumes the widest possible type as string[]. To narrow it down, you can use as const.

([3,4,5] as const).map(i => {
initialValues[`prop${i}`] = 'zzzz';});

Take a look at this code in the Typescript playground.

Answer 2

When working with [3,4,5,6], Typescript automatically assumes the widest possible type as string[]. To narrow it down, you can use as const.

([3,4,5] as const).map(i => {
initialValues[`prop${i}`] = 'zzzz';});

Take a look at this code in the Typescript playground.

Answer 3

Answer №2

Typescript struggles to recognize that the values you provide are valid keys of the interface, posing a limitation.

Your best option is to utilize type assertion, although keep in mind that it does not ensure type safety; instead, you are essentially confirming to TS that the type is accurate:

interface MyObject {
  prop1: string;
  prop2: string;
  prop3?: string;
  prop4?: string;
  prop5?: string;
} 

let initialValues: MyObject = {
  prop1: 'x',
  prop2: 'y'
}

let ans = [3,4,5,6].map(i => {
    initialValues[`prop${i}` as keyof MyObject] = 'zzzz';
});

It's important to note that TS may not automatically discern that 6 won't cause any issues here.

Link

Answer 4

Typescript struggles to recognize that the values you provide are valid keys of the interface, posing a limitation.

Your best option is to utilize type assertion, although keep in mind that it does not ensure type safety; instead, you are essentially confirming to TS that the type is accurate:

interface MyObject {
  prop1: string;
  prop2: string;
  prop3?: string;
  prop4?: string;
  prop5?: string;
} 

let initialValues: MyObject = {
  prop1: 'x',
  prop2: 'y'
}

let ans = [3,4,5,6].map(i => {
    initialValues[`prop${i}` as keyof MyObject] = 'zzzz';
});

It's important to note that TS may not automatically discern that 6 won't cause any issues here.

Link

Answer 5

Answer №3

To inform TypeScript that a property will be part of the object, utilize a type assertion:

interface MyObject {
  prop1: string;
  prop2: string;
  prop3: string;
  prop4: string;
  prop5: string;
} 

let initialValues: MyObject;

//Setting a property
initialValues = {
    prop1: 'xxxx'
    prop2: 'yyyy'
}

//Assigning values to existing properties 
[3,4,5,6].map(i => {
    initialValues[`prop${i}` as keyof MyObject] = 'zzzz';
});

TypeScript Playground

However, exercise caution with this approach! TypeScript does not verify if the property is valid, leading to potential loss of runtime type safety. TypeScript remains silent in such cases.

If you are aware of the possible array values, specifying them will enable TypeScript to recognize valid keys:

interface MyObject {
  prop1: string;
  prop2: string;
  prop3?: string;
  prop4?: string;
  prop5?: string;
} 

let initialValues: MyObject;

//Setting a property
initialValues = {
    prop1: 'xxxx',
    prop2: 'yyyy'
};

//Assigning values to existing properties 
let values: (3 | 4 | 5 | 6)[] = [3, 4, 5, 6];
values.map(i => {
    initialValues[`prop${i}`] = 'zzzz';
});

TypeScript Playground

In this scenario, TypeScript only flags prop6 for invalidity. Opt for this method whenever feasible to maintain type safety.

Answer 6

To inform TypeScript that a property will be part of the object, utilize a type assertion:

interface MyObject {
  prop1: string;
  prop2: string;
  prop3: string;
  prop4: string;
  prop5: string;
} 

let initialValues: MyObject;

//Setting a property
initialValues = {
    prop1: 'xxxx'
    prop2: 'yyyy'
}

//Assigning values to existing properties 
[3,4,5,6].map(i => {
    initialValues[`prop${i}` as keyof MyObject] = 'zzzz';
});

TypeScript Playground

However, exercise caution with this approach! TypeScript does not verify if the property is valid, leading to potential loss of runtime type safety. TypeScript remains silent in such cases.

If you are aware of the possible array values, specifying them will enable TypeScript to recognize valid keys:

interface MyObject {
  prop1: string;
  prop2: string;
  prop3?: string;
  prop4?: string;
  prop5?: string;
} 

let initialValues: MyObject;

//Setting a property
initialValues = {
    prop1: 'xxxx',
    prop2: 'yyyy'
};

//Assigning values to existing properties 
let values: (3 | 4 | 5 | 6)[] = [3, 4, 5, 6];
values.map(i => {
    initialValues[`prop${i}`] = 'zzzz';
});

TypeScript Playground

In this scenario, TypeScript only flags prop6 for invalidity. Opt for this method whenever feasible to maintain type safety.

"Using an indexer in TypeScript allows for direct access to object properties by simply specifying the key within

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Angular 5 EventEmitter causing child to parent component emission to result in undefined output

Issue with TagCloud functionality when deployed on Vercel platform

Using Typescript to assign a custom object to any object is a powerful feature

Failure to invoke Jest Spy

Can the return type of a function be utilized as one of its argument types?

Exploring the functionality of this TypeScript code: What's the distinction between { [key: string]: string }[] and { prop1: string, prop2: string }[]

Execute environment validation on server during `next build` command

Tips for saving an Angular project for offline use

Remember to always call "done()" in Typescript + Mocha/Chai when dealing with async tests and hooks. Additionally, when returning a Promise, make sure it resolves correctly

The module `perf_hooks` could not be resolved

How can I integrate the jQuery Plugin Mapael with Angular 5?

Implementing Styled API in TypeScript with props: A Comprehensive Guide

Issue with VueJS 2 and TypeScript: computed value unable to recognize property specified in data object

Travis CI's TypeScript build process detects errors before Mocha has a chance to catch them

Improving the process of class initialization in Angular 4 using TypeScript

Enabling Javascript compilation while overlooking typescript errors

If a generic string argument is not specified as a string literal, it will not be narrowed unless it is the first argument

A Defer statement in TypeScript that mimics Go's functionality

Receiving NULL data from client side to server side in Angular 2 + Spring application

Tips on adding TypeScript annotations to an already existing global function