Могу ли я создать тип объединения из интерфейса?

Question

Я хочу иметь возможность вызывать функцию getSvgPresentationAttribute с любым допустимым именем свойства CSS как cssStyleAttribute. Но я не получил его на работу.

В моем текущем коде ниже я получаю сообщение Type 'CSSStyleDeclaration' cannot be used as an index type..

export function getSvgPresentationAttribute(
    element: SVGElement,
    cssStyleAttribute: CSSStyleDeclaration,
    svgElementAttribute: string
  ): string | undefined {
    const cssStyleValue = element.style[cssStyleAttribute];
    if (cssStyleValue !== "") {
      return cssStyleValue;
    }

    return getSvgAttribute(element, svgElementAttribute);
  }

Что я могу сделать с этим?

Вот как выглядит интерфейс, который я использую.

interface CSSStyleDeclaration {
    alignContent: string;
    alignItems: string;
    alignSelf: string;
    alignmentBaseline: string;
    ...
}

Вот то, что, я думаю, мне понадобится как тип, чтобы этот код (или что-то подобное) работал.

type CSSStyleDeclaration =
    "alignContent" |
    "alignItems" |
    "alignSelf" |
    "alignmentBaseline";
    ...
}

Я открыт для любого решения.

Answer 1

Используйте оператор keyof, чтобы сообщить машинописному тексту, что параметром является любая клавиша CSSStyleDeclaration.

export function getSvgPresentationAttribute(
    element: SVGElement,
    cssStyleAttribute: keyof CSSStyleDeclaration,
    svgElementAttribute: string
  ): string | undefined {
    const cssStyleValue = element.style[cssStyleAttribute];
    if (cssStyleValue !== "") {
      return cssStyleValue;
    }

    return getSvgAttribute(element, svgElementAttribute);
  }