Type '{ [x: number]: any; }' is missing the following properties from Pick<T, keyof T>

Question

I have this code

interface FormState {
    cardNumber: string,
    month: string,
    year: string
}

    handleInputChange = (event: React.ChangeEvent<MaskedInput>) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

TypeScript doesn't know what the name property of event.target is, but I know that it will always match the FormState keys. Similarly with the value property.

I tried to fix it with type assertion but still get the error

type ObjectKey<T> = keyof T;
type ValueOf<T> = T[keyof T];

[event.target.name as ObjectKey<FormState>]: event.target.value as ValueOf<FormState>

How can I fix this?

Answer 1

Just add the type for target name in React.ChangeEvent:

handleInputChange = (event: React.ChangeEvent<{name: keyof FormState}>) => {

Since you are handling input change, the better type will be React.ChangeEvent<HTMLInputElement>:

type TargetName=keyof FormState
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let name = event.target.name as TargetName
    name===''
};