Блог

Главная - Вопросы по программированию - Замените условия перечислением в Typescript

Замените условия перечислением в Typescript

#javascript #reactjs #typescript #enums #react-typescript

#javascript #reactjs #typescript #перечисления #реагировать -typescript

Вопрос:

Имея следующий исходный код, это функция, которая на основе значения toCheck создает класс css:

 const computeSomething = (toCheck: string) => {
   return clsx('flex', {
     'flex-start': toCheck === 'FIRST',
     'flex-end': toCheck === 'LAST'
   });
}

Требование состоит в том, чтобы использовать enum for toCheck , пробовал что-то, но, вероятно, это неправильно:

 export enum toCheck {
  FIRST = 'FIRST',
  LAST = 'LAST'
}

const computeSomething = (toCheck: string) => {
   return clsx('flex', {
     'flex-start': toCheck.FIRST,
     'flex-end': toCheck.LAST
   });
}

Ошибка гласит:

Свойство ‘FIRST’ не существует для типа ‘string’.

Есть идеи?

Комментарии:

1. Вы даже не используете параметр toCheck: string

Ответ №1:

Проблема в том, что ваш toCheck не ссылается на (предполагаемое) перечисление из-за того, что ваш параметр назван тем же именем ( toCheck: string ). Изменение имени любого из них должно решить проблему:

 export enum ToCheckEnum {
  FIRST = 'FIRST',
  LAST = 'LAST'
}

const computeSomething = (toCheck: string) => {
   return clsx('flex', {
     'flex-start': ToCheckEnum.FIRST,
     'flex-end': ToCheckEnum.LAST
   });
}

Соглашение заключается в том, что enum / type должен иметь регистр Pascal, поэтому я думаю, что этот способ лучше.

Ответ №2:

Почему вы передаете toCheck в качестве аргумента? Просто сделайте это:

 export enum ToCheckEnum {
  FIRST = 'FIRST',
  LAST = 'LAST'
}


const computeSomething = (toCheck: ToCheckEnum) => {
  return clsx('flex', {
    'flex-start': toCheck === ToCheckEnum.FIRST,
    'flex-end': toCheck === ToCheckEnum.LAST
  });
}

Комментарии:

1. потому что мне нужно знать, какой вариант запустить

2. Я обновил ответ

Ответ №3:

Вы затеняете перечисление, используя то же имя для своего параметра. Используйте другое имя для перечисления и параметра, чтобы избежать этого. Идиоматическим падежом для перечислений является PascalCase.

После этого просто используйте универсальный, который расширяет тип перечисления, и у вас не должно возникнуть никаких проблем:

Ссылка на игровую площадку TS

 declare function clsx (...args: unknown[]): void;

enum ToCheck {
  FIRST = 'FIRST',
  LAST = 'LAST',
}

const computeSomething = <T extends typeof ToCheck>(toCheck: T) => {
   return clsx('flex', {
     'flex-start': toCheck.FIRST,
     'flex-end': toCheck.LAST
   });
}

computeSomething(ToCheck); // ok
Метки: