Replace

[field: string]: {
   property1: string,
   property2: string
}

by

    interface Anything {
      [key: string]: any;
    }

And when you're calling then: do this

let item = { property1: "randomTest", property2: "randomTest1", property3: "randomTest3"}

 this.setState({
    [item].property1: "test value 1"
 })

It's definitely hard to get around this type of thing without casting. You can try following the pattern described here:

updateState(key: StateKeys, value: string) {
  this.setState((prevState) => ({
    ...prevState,
    [key]: value,
  }));
}

which would look like:

_onTimeComponentChange(e: any) {
  const name: StateKeys  = e.currentTarget.name
  const updatedValue = parseInt(e.currentTarget.value)
  this.setState(
    prevState => ({
      ...prevState,
      [name]: updatedValue,
    }),
    () => {
    },
  )
}

In the perfect world we should be able to write something like this:

private handleChange = (e: {target: {name: "low" | "high", value: string}}) =>
{
    const { name, value } = e.target;

    this.setState({[name]: value});
}

But unfortunately a reported bug (see here or here) force us to use some temp workaround like casting to any or such:

this.setState({[name]: value} as any);

So after doing more research I can provide a little more context on what is happening in the above code.

When you do something like const name = 'Bob' the type of the variable name is 'Bob' not string. However, if you replace the const with a let (let name = 'Bob') the variable name will be of type string.

This concept is called "widening". Basically, it means that the type system tries to be as explicit as possible. Because const can not be reassigned TypeScript can infer the exact type. let statements can be reassigned. Thus, TypeScript will infer string (in the above example) as the type of name.

The same is happening with const key = e.currentTarget.name as keyof Person. key will be of (union) type "name"|"age", which is exactly what we want it to be. But in the expression this.setState({ [key]: value }); variable key is (incorrectly) widened to a string.

tl;dr; It seems like there is a bug in TypeScript. I posted the issue to the Github repo and the TypeScript team is investigating the problem. :)

As a temporary workaround you can do:

this.setState({ [key as any]: value });

Index signatures

It is possible to denote obj as any, but that defeats the whole purpose of using typescript. obj = {} implies obj is an Object. Marking it as any makes no sense. To accomplish the desired consistency an interface could be defined as follows, using an index signature

interface LooseObject {
    [key: string]: any
}

var obj: LooseObject = {};

OR to make it compact:

var obj: {[k: string]: any} = {};

LooseObject can accept fields with any string as key and any type as value.

obj.prop = "value";
obj.prop2 = 88;

The real elegance of this solution is that you can include typesafe fields in the interface.

interface MyType {
    typesafeProp1?: number,
    requiredProp1: string,
    [key: string]: any
}

var obj: MyType ;
obj = { requiredProp1: "foo"}; // valid
obj = {} // error. 'requiredProp1' is missing
obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number

obj.prop = "value";
obj.prop2 = 88;

Record<Keys,Type> utility type

Update (August 2020): @transang brought up the Record<Keys,Type> utility type in comments

Record<Keys,Type> is a Utility type in typescript. It is a much cleaner alternative for key-value pairs where property-names are not known. It's worth noting that Record<Keys,Type> is a named alias to {[k: Keys]: Type} where Keys and Type are generics. IMO, this makes it worth mentioning here

For comparison,

var obj: {[k: string]: any} = {};

becomes

var obj: Record<string,any> = {}

MyType can now be defined by extending Record type

interface MyType extends Record<string,any> {
    typesafeProp1?: number,
    requiredProp1: string,
}

While this answers the Original question, the answer here by @GreeneCreations might give another perspective on how to approach the problem.

That's not something you'd ever want to do. What you need is a HOC that owns the values and names.

The problem is that e.target.name should be key of IState and e.target.value should be relative type from key in IState, to fix it you can manually cast type like

this.setState({
            [e.target.name]: e.target.value
    } as Pick<IState, keyof IState>);

but it disables typescript for this function also you can cast it to any type, but it's unsafe.

Looks like this answer also can be helpful for you

The best option is to use ReduxForm

I found the answer here: https://stackoverflow.com/a/55014391

Typing the COMPONENTS object fixed my problem.

import React, {useState, useEffect} from 'react'
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';
  
const DynamicComponent: React.FC = ({key}) => {  
  const [Component, setComponent] = useState<any>();
  const COMPONENTS: {[key: string]: React.FC<any>} = {
    COMPONENT_A: ComponentA,
    COMPONENT_B: ComponentB,
  };

  useEffect(() => {
    if (key) setComponent(COMPONENTS[key])
  }, [key]);

  return Component ? React.createElement(Component) : null;
};

I've been able to find a way out using the code snippet below

export const validateObjectId = (key: string = 'id'): ObjectSchema => {
  interface Obj {
    [key: string]: Object;
  }

  const object: Obj = {};

  object[key] = Joi.string()
    .regex(/^(?=[a-f\d]{24}$)(\d+[a-f]|[a-f]+\d)/i)
    .required();
  return Joi.object(object);
};