Рекурсивное объявление типа в Typescript

Question

Я пробовал это всеми возможными способами, и я просматривал другие подобные посты, касающиеся рекурсивных типов, но я не смог создать тип, который работает рекурсивно для этого случая.

Я хочу, чтобы этот тип принимал частичные свойства CSSStyleDeclaration, а для любых свойств не , соответствующих свойству CSSStyleDeclaration, я хочу, чтобы он отображался обратно на сам тип.

Кажется, это работает только для первого уровня:

interface NestedCSSDeclarations {
    [name: string]: CSSDeclaration;
}

type CSSDeclaration = {
    [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
} & NestedCSSDeclarations

function css(obj: CSSDeclaration) {
    // ...
}

let style = {
  headline: css({
    color: "red",
    h1: {
      color: "blue",
      "&:hover": {
        color: "green"
      }
    },
    "@media screen and (min-width: 400px)": {
      h1: {
        fontSize: "50px"
      }
    }
  })
}

Нет ли способа напечатать эту подсказку?

Answer 1

Если вы используете | оператор вместо &, он будет работать нормально

type CSSDeclaration = {
    [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
} | NestedCSSDeclarations