2

Допустим у меня есть объект с темой:

const theme: Theme = {
 primary: {
  main: "",
  other: "",
 },
 secondary: {
  black: "",
  white: "",
 }
}

interface PrimaryColors {
 main: string
 other: string
}

interface SecondaryColors {
 black: string
 white: string
}

interface Theme {
 primary: PrimaryColors
 secondary: SecondaryColors
}

Мне нужно принять значения для группы цвета (primary | secondary) и значения для самого цвета:

type FooProps = {
 colorGroup: keyof Theme
 color: keyof (PrimaryColors | SecondaryColors)
}

const foo = ({ colorGroup, color }: FooProps) => ({
 color: theme[colorGroup][color]
})

При передаче аргумента color в функцию foo typescript выдает ошибку:
TS2322: Type 'string' is not assignable to type 'never'.

1 ответ 1

0

В данном случае проблема заключается в union типе PrimaryColors | SecondaryColors. У типов PrimaryColors и SecondaryColors нет одинаковых свойств, поэтому при попытке взять keyof - получается never.

Более того, сам подход не совсем корректный, так как нет связи поля colorGroup и поля color, то есть может быть вариант, когда группа указана PrimaryColors, а цвет из SecondaryColors.

Вместо этого можно вообще отказаться от типа, и использовать сразу generic функцию

Для этого нужно:

  1. указать, что generic параметр может быть только из ключей Theme: T extends keyof Theme

  2. задать два параметра

    1. colorGroup с типом T
    2. color, с типом, keyof Theme[T] - в него войдут только ключи из соответствующего поля

В итоге это может выглядеть так:

function foo<T extends keyof Theme>(colorGroup: T, color: keyof Theme[T]) {
  return {
    color: theme[colorGroup][color]
  };
}

Playground Link

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.