如何在 Typescript 中安全地使用动态键

Question

我正在寻找一种安全的方法来创建这样的键控对象：

interface Statuses {
  WAITING: 'WAITING';
  IN_PROGRESS: 'IN_PROGRESS';
  RESOLVED: 'RESOLVED';
}

type StatusKeys = keyof Statuses;

const STATUS: Statuses = {
  WAITING: 'WAITING',
  IN_PROGRESS: 'IN_PROGRESS',
  RESOLVED: 'RESOLVED',
};

但是我觉得这样设置有点不舒服和多余，需要声明两次值。

有没有更好更安全的方法来做到这一点？

在我的 React 函数中是这样的：

const [status, setStatus] = useState<StatusKeys>(STATUS.WAITING);

const handleStatusChange = (
  event: React.ChangeEvent<{ name?: string; value: unknown }>
) => {
  const newStatusValue = event.target.value as StatusKeys;
  setStatus(newStatusValue);
};

Answer 1

对于这种情况，我更喜欢enum。

https://www.typescriptlang.org/docs/handbook/enums.html

enum Status {
  WAITING = "WAITING",
  IN_PROGRESS = "IN_PROGRESS",
  RESOLVED = "RESOLVED"
}

// ...

// Note you don't need to explicitly declare type here with <Status>.
// TS will automatically infer type of "status" as any Status enum value.
const [status, setStatus] = useState(Status.WAITING);

const handleStatusChange = (
  event: React.ChangeEvent<{ name?: string; value: Status }>
) => {
  const newStatusValue = event.target.value;
  setStatus(newStatusValue);
};

为什么是enum？通常，它们可以更好地推断can also work the same as string values，避免重复，并在概念上更好地匹配数据所代表的内容（在“编译时”预先知道的一组固定相关值）。

枚举允许我们定义一组命名常量。使用枚举可以更轻松地记录意图，或创建一组不同的案例。

如果你想把你的enum的字符串值作为一个数组，你可以把它当作一个对象用Object.keys()：

const statuses = Object.keys(Status);
// ["WAITING", "IN_PROGRESS", "RESOLVED"]