Как безопасно работать с ключами Dynami c в Typescript - PullRequest
Новая
       28

Как безопасно работать с ключами Dynami c в Typescript

0 голосов
/ 18 июня 2020

Я ищу безопасный способ создания таких объектов с ключами: 

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

1 Ответ

0 голосов
/ 18 июня 2020

Я бы предпочел 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? Как правило, они делают вывод лучше, может также работать так же, как строковые значения , избегать дублирования и лучше концептуально соответствовать тому, что представляют данные (фиксированный набор связанных значений, известный заранее во время «компиляции») *. 1013 *

Перечисления позволяют нам определять набор именованных констант. Использование перечислений может упростить документирование намерений или создать набор отдельных случаев.

Если вы хотите получить строковые значения вашего enum в виде массива, вы можете рассматривать его как объект с Object.keys(): 

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