Как добавить тип перечисления для значения HTMLInputElement

Question

Как я могу ввести пользовательский тип перечисления в значение HTMLInputElement?

Я искал документ с машинописным текстом, но не могу найти это.

enum ValidColor {
  'red',
  'blue',
}

class paintStore {
  wallColor: ValidColor = 'red';

  onPaintClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.wallColor = e.target.value // Type 'string' is not assignable to type 'ValidColor'.ts(2322)
  }
}

Я пытался создать пользовательский тип, но не смог,

interface ColorTarget {
  value: ValidColor;
}

interface MyColor extends HTMLInputElement {
  target: ColorTarget;
}

onPaintClick = (e: React.ChangeEvent<MyColor>) => {
    this.wallColor = e.target.value // it is not working...
  }

Как я могу это сделать?

Answer 1

Это потому, что e.target.value может быть любой строкой.

Возможно, вы хотите гарантировать, что цвет будет «красным» или «синим» другим способом.

Самый простой способ - сказать компилятору: «Я знаю, что этот цвет будет красным или синим», используя ключевое слово «as»:

enum ValidColor {
  'red',
  'blue',
}

class paintStore {
  wallColor: ValidColor = 'red';

  onPaintClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.wallColor = e.target.value as ValidColor;
  }
}

Лучшим способом является использование определяемых пользователем элементов защиты типов (подробнее здесь:https://basarat.gitbooks.io/typescript/docs/types/typeGuard.html)

enum ValidColor {
  Red = 'red',
  Blue = 'blue'
}

const validColors: string[] = [ValidColor.Red, ValidColor.Blue];

const isValidColor = (inputColor: string): inputColor is ValidColor => {
  return validColors.indexOf(inputColour) !== -1;
};

class paintStore {
  wallColor: ValidColor = 'red';

  onPaintClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    const maybeColor = e.target.value; // here it's a string

    if (isValidColor(maybeColor)) {
        // inside this block, maybeColor is narrowed to type ValidColor...
        this.wallColor = maybeColor;
    }

    // Decide what to do if it's not a valid color here
  }
}

Обратите внимание на тип возвращаемого значения функции isValidColor - он сообщает TypeScript, как настроить тип возвращаемого значения.