Typescript：与“keyof interface”相比，“keyof typeof value”产生不同的类型结果

Question

I initially defined the intersection type of type DOMRectReadOnly and StyleProperties like below which results type "size" | "start" | "end" "size" | "start" | "end" "size" | "start" | "end" .

interface StyleProperties {
    size: ["width", "height"];
    start: ["left", "top"],
    end: ["right", "bottom"];
}

export const StyleProperties: StyleProperties = {
    size: ["width", "height"],
    start: ["left", "top"],
    end: ["right", "bottom"]
};

type DOMRectStyleProperties = {
  [P in keyof StyleProperties]:
    (StyleProperties[P][0] | StyleProperties[P][1]) extends keyof DOMRectReadOnly
    ? P
    : never
}[keyof StyleProperties];

But I want to remove interface StyleProperties part and replace its uses with typeof StyleProperties like below, but it results type never .

export const StyleProperties = {
    size: ["width", "height"],
    start: ["left", "top"],
    end: ["right", "bottom"]
};

type DOMRectStyleProperties = {
  [P in keyof typeof StyleProperties]:
    (typeof StyleProperties[P][0] | typeof StyleProperties[P][1]) extends keyof DOMRectReadOnly
    ? P
    : never
}[keyof typeof StyleProperties];

What's wrong in my usage of typeof keyword?

Answer 1

Nothing is wrong with your use of typeof . The issue is that the types that typescript is able to infer for StyleProperties is less strict than you'd like:

const StyleProperties = {
    size: ["width", "height"],
    start: ["left", "top"],
    end: ["right", "bottom"]
};
type Example = typeof StyleProperties;

If you look at this, you'll see that these properties are now string[] rather than typed tuples. If you tell typescript that these are constants and won't change, you should get the type you want:

const StyleProperties = {
    size: ["width", "height"] as const,
    start: ["left", "top"] as const,
    end: ["right", "bottom"] as const,
};
type Example = typeof StyleProperties;

And with the correct type, using typeof should do what you want!