在 React TypeScript 中仅包含 boolean 值的 object 的类型是什么？

Question

我有一些我在 React JavaScript 中编写的代码，现在已经迁移到 TypeScript 并且我不完全确定将类型声明为什么。 我最好不想使用any类型：

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

Answer 1

有两种方法：

1. 将类型设置为记录

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. 为 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

如果你想非常具体：

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

否则奥列格上面的回答应该这样做:)