我可以从接口创建联合类型吗？

Question

I want to be able to call the function getSvgPresentationAttribute with any valid CSS property name as cssStyleAttribute. But I haven't gotten it to work.

In my current code below I get the message 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);
  }

What can I do about this?

Here is what the interface I am using looks like.

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

Here is what I guess I would need as a type to make this code (or something similar) work.

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

I am open to any solution.

Answer 1

Use the keyof operator to tell typescript that the parameter is any key of 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);
  }