typescript - 键入一个变量作为映射中的任何键？

Question

我有一张 map 和一个函数。我希望该函数接受 map 中的任何键作为参数。我下面的代码不起作用。 keyof typeof svgAttributeToCssStyle是 "clear" | "delete" | "forEach" | "get" | ...而不是 ["alignment-baseline", "baseline-shift", ...]正如我希望的那样。

map :

const svgAttributeToCssStyle = new Map<string, keyof CSSStyleDeclaration>([
  ["alignment-baseline", "alignmentBaseline"],
  ["baseline-shift", "baselineShift"],
  ["clip", "clip"],
  ["clip-path", "clipPath"],
  ["color", "color"],
  ["color-interpolation", "colorInterpolation"],
  ["color-interpolation-filters", "colorInterpolationFilters"],
  ["cursor", "cursor"],
  ["direction", "direction"],
  ["display", "display"],
  ["dominant-baseline", "dominantBaseline"],
  ["enable-background", "enableBackground"],
  ["fill", "fill"],
  ["fill-opacity", "fillOpacity"],
  ["fill-rule", "fillRule"],
  ["filter", "filter"],
  ["flood-color", "floodColor"],
  ["flood-opacity", "floodOpacity"],
  ["font-family", "fontFamily"],
  ["font-size", "fontSize"],
  ["font-size-adjust", "fontSizeAdjust"],
  ["font-stretch", "fontStretch"],
  ["font-style", "fontStyle"],
  ["font-variant", "fontVariant"],
  ["font-weight", "fontWeight"],
  ["glyph-orientation-horizontal", "glyphOrientationHorizontal"],
  ["glyph-orientation-vertical", "glyphOrientationVertical"],
  ["image-rendering", "imageRendering"],
  ["kerning", "kerning"],
  ["letter-spacing", "letterSpacing"],
  ["lighting-color", "lightingColor"],
  ["marker-end", "markerEnd"],
  ["marker-mid", "markerMid"],
  ["marker-start", "markerStart"],
  ["mask", "mask"],
  ["opacity", "opacity"],
  ["overflow", "overflow"],
  ["pointer-events", "pointerEvents"],
  ["shape-rendering", "shapeRendering"],
  ["stop-color", "stopColor"],
  ["stop-opacity", "stopOpacity"],
  ["stroke", "stroke"],
  ["stroke-dasharray", "strokeDasharray"],
  ["stroke-dashoffset", "strokeDashoffset"],
  ["stroke-linecap", "strokeLinecap"],
  ["stroke-linejoin", "strokeLinejoin"],
  ["stroke-miterlimit", "strokeMiterlimit"],
  ["stroke-opacity", "strokeOpacity"],
  ["stroke-width", "strokeWidth"],
  ["text-anchor", "textAnchor"],
  ["text-rendering", "textRendering"],
  ["transform", "transform"],
  ["unicode-bidi", "unicodeBidi"],
  ["visibility", "visibility"],
  ["word-spacing", "wordSpacing"],
  ["writing-mode", "writingMode"],
]);

功能:

export function getPresentationAttribute(attribute: keyof typeof svgAttributeToCssStyle) {
  ...
}

我怎样才能做到这一点？

Answer 1

如果您将映射键的类型明确指定为 string TS 不会保留 key 的类型。

如果您让 TS 推断 key 的类型，并且您还使用了 as const对映射源数组进行断言，然后 TS 将保留映射的类型，即键的实际文字类型。

然后您可以使用映射类型来提取映射键的类型(keyof 返回类型成员，与映射键无关)

const svgAttributeToCssStyle = new Map([
  ["alignment-baseline", "alignmentBaseline"],
  ["baseline-shift", "baselineShift"],
  ["clip", "clip"],
  ["clip-path", "clipPath"],
  // ...
] as const);

type MapKeyType<T extends Map<any, any>> = T extends Map<infer K, any> ? K : never;
export function getPresentationAttribute(attribute: MapKeyType<typeof svgAttributeToCssStyle>) {

}

getPresentationAttribute("clip-path")
getPresentationAttribute("clipPath") // errr

Playground Link