TypeScript: для какого типа установить значение, которое будет сравниваться со списком типов?

Question

Я новичок в React и TypeScript, поэтому извиняюсь за запутанный заголовок.

У меня есть компонент, который принимает опору как таковую:

<HelperText level={helperLevel} />

На компоненте HelperText это level значение сравнивается с массивом, например:

type Level = 'Low' | 'Med' | 'High';

interface HelperTextProps {
  level: Level;
  lowLevel: string;
  medLevel: string;
  highLevel: string;
}

Однако я получаю сообщение об ошибке при компиляции:

Тип 'строка' не присваивается введите "Уровень". TS2322

Я не уверен, что это значит и как с этим справиться. Я не понимаю существующих решений в Google.

Может ли кто-нибудь указать мне в правильном направлении?

Answer 1

Предполагается, что компонент, который отображает <HelperText>, имеет свойство с именем helperLevel. Тип вашего helperLevel реквизита должен совпадать с типом уровня HelperText.

interface HelperTextRenderComponentProps {
  helperLevel: Level; // Here should be Level instead of string.
  // OR
  helperLevel: HelperTextProps['level']; // When your `level` props changed in HelperText component, here will be changed as well.
}

---

Если вы очень уверены, что значение helperLevel является одним из «Низкое» , 'Med' или 'High', вы можете использовать синтаксис as. Обычно это не рекомендуется, так как helperLevel теперь может быть любой строкой без защиты типа.

<HelperText level={helperLevel as Level} />

Answer 2

Ключевой момент, о котором следует помнить, это то, что типы являются концепцией Typescript, и когда он компилируется в JavaScript, все объявленные типы удаляются, и проверки времени выполнения типов не выполняются (если вы явно не закодировали их в коде).

Это означает, что во время выполнения, даже если в вашем TypeScript вы сказали, что ожидаете строку со значениями 'Low' | 'Med' | 'High';, технически в мире JavaScript, эти строки могут иметь любое значение, и вы будете никто не мудрее. Куда я пойду с этим?

Тип «строка» не может быть назначен типу «Уровень». TS2322

Причина, по которой вы получаете эту ошибку, заключается в том, что проверка типов, являющаяся реализацией перед компиляцией, пытается смягчить приведенный выше пример, где JavaScript не будет проверять, является ли строка одним из: 'Low' | 'Med' | 'High';. Итак, ваша задача - убедиться, что компилятор, который вы проверили, helperLevel, действительно будет одним из 'Low' | 'Med' | 'High';.

Для этого обновите свой html до: <HelperText level={helperLevel as Level} />

Answer 3

Если вы установите HelperTextProps like

type Level = 'Low' | 'Med' | 'High';

interface HelperTextProps {
  level: Level;
  lowLevel: string;
  medLevel: string;
  highLevel: string;
}

, вы сможете использовать только компонент HelperText.

<HelperText level='Low' />

---

Обычно я использую

export enum Level {
  Low = 'Low',
  Med = 'Med',
  High = 'High'
}

interface HelperTextProps {
  level: Level;
  lowLevel: string;
  medLevel: string;
  highLevel: string;
}

И используйте

<HelperText level={Level.Low} />