React, Typescript, how to check key values

Question

I have this type:

interface MyType {
   name: string
   age: number
   friend: Person
}

and consider this state:

const [myState, setMyState] = useState<MyType>({.....})

and I have this function that changes a filed inside useState:

const handleChange = (filed: keyof MyType, value: unknown) => {
   setMyState({
      ...myState,
      [field]: value
   })
}

how can I use generics or some other work around to type the value argument in the above function?
I expect my handleChange function to throw error when wrong value is passed to a field:

handleChange("name", 5);

captain-yossarian from Ukraine · Accepted Answer · 2022-08-22 05:50:37Z

1

You need add generic for field argument:

import React, { useState } from 'react'

type Person = {
  tag: 'Person'
}
interface MyType {
  name: string
  age: number
  friend: Person
}

declare const DEFAULT_STATE: MyType

const App = () => {
  const [myState, setMyState] = useState<MyType>(DEFAULT_STATE)

  const handleChange = <Field extends keyof MyType>(field: Field, value: MyType[Field]) => {
    setMyState({
      ...myState,
      [field]: value
    })
  }

  handleChange('name', 'John') // ok
  handleChange('age', 'five') // expected error

}

Playground

answered Aug 22, 2022 at 5:50

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

punjira Over a year ago

wish I could up-vote this twice.

Collectives™ on Stack Overflow

React, Typescript, how to check key values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related