Ошибка TypeScript, когда я добавляю число и передаю его в качестве опоры?

Question

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

В Heading.tsx

type Props = {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  children: string;
};

Другому моему компоненту нужно добавить номер в указанную опору и сделайте так, чтобы уровень:

В MyComponent.tsx:

type Props = {
  componentLevel: 1 | 2 | 3;
};

const MyComponent = ({ componentLevel }) => (
  <Heading level={componentLevel + 1}>My Component Heading text</Heading>
)

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

TS2322: Тип «номер» не может быть присвоен типу «1 | 2 | 3 | 4 | 5 | 6 '.

Answer 1

Код других людей - хороший ответ, я просто хочу добавить несколько деталей: когда вы используете объединение, подобное этому: level?: 1 | 2 | 3 | 4 | 5 | 6;, а затем передаете level={componentLevel + 1} в качестве реквизита компонента Heading, только TS может понимать componentLevel + 1 как число, потому что вы не упомянули, что это одно значение в объединении level?: 1 | 2 | 3 | 4 | 5 | 6;.

Answer 2

Typescript не может сказать, что если вы возьмете что-то типа 1 | 2 | 3 и добавите к нему, то его тип станет 2 | 3 | 4. Вместо этого результатом будет просто number, что слишком широко для ожидаемого заголовка. Вам нужно будет подтвердить, что это правильный тип.

<Heading level={(componentLevel + 1) as 1 | 2 | 3 | 4 | 5 | 6}>My Component Heading text</Heading>

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

type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6

type Props = {
  level?: HeadingLevel,
  children: string
}

// ... 
<Heading level={(componentLevel + 1) as HeadingLevel}>My Component Heading text</Heading>

Answer 3

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

type ComponentLevel = 1 | 2 | 3 | 4 | 5 | 6;
type HeadingLevel = 2 | 3 | 4 | 6 | 6 | 7;

const componentToHeadingLevel: (c: ComponentLevel) => HeadingLevel = c => c + 1 as HeadingLevel;

Вы можете думать о номере типа как 1 | 2 | 3 ... и c. и поэтому на самом деле мы просто четко определяем, что мы хотим в типе.

Answer 4

Вы можете сделать:

В Heading.tsx

type HeadingProps = {
  level?: HeadingLevel;
  children: string;
};

type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

В MyComponent.tsx

<Heading level={(componentLevel + 1) as HeadingLevel}>My Component Heading text</Heading>