What is the type for an object that contains only boolean values in React TypeScript?

Question

I have some code that I wrote in React JavaScript that has now been migrated over to TypeScript and I'm not entirely sure what to declare the type as. I preferably don't want to use the type any :

  const [responseStatus, setResponseStatus] = React.useState<any>({
    emptyResponse: true,
    unsuccessfulResponse: false,
    successfulResponse: false,
    badResponse: false
  });

Answer 1

There are two ways:

1. Set the type as a Record

type ResponseType = Record<string, boolean>;

const Component: React.FC = (): JSX.Element => {
  const [responseStatus, setResponseStatus] = React.useState<ResponseType>({
    emptyResponse: true,
    unsuccessfulResponse: false,
    successfulResponse: false,
    badResponse: false
  });

  return (
    <div>{responseStatus.emptyResponse}</div>
  )
}

2. Make an interface for the state

interface ResponseStatus {
  [key: string]: boolean;
}

const Component: React.FC = (): JSX.Element => {
  const [responseStatus, setResponseStatus] = React.useState<ResponseStatus>({
    emptyResponse: true,
    unsuccessfulResponse: false,
    successfulResponse: false,
    badResponse: false
  });

  return (
    <div>{responseStatus.emptyResponse}</div>
  )
}

Answer 2

If you want to be very specific:

interface ResponseStatus {
  [key: 'emptyResponse' | 'unsuccessfulResponse' | 'successfulResponse' | 'badResponse' ]: boolean;
}

Otherwise Oleg's answer above should do it:)