javascript - 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
  });

question from:https://stackoverflow.com/questions/65919903/what-is-the-type-for-an-object-that-contains-only-boolean-values-in-react-typesc

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>
  )
}