Typeguard 不会缩小类型

Question

我正在创建一个对象来存储一堆 RGB 颜色，并且允许嵌套。因此，在遍历对象时，我需要查看哪些键对应于 RGB 值或对象。但是，我尝试过的每种类型保护实际上都不会缩小类型范围。

type Color = [number, number, number] | 'transparent'
type ColorGroup = Record<string, Color>
type Colors = Record<string, Color | ColorGroup>

const colors: Colors = {
    black: [0, 0, 0],
    white: [255, 255, 255],
    transparent: 'transparent',
    primary: {
        '50': [211, 233, 252],
        '100': [179, 213, 248],
        '200': [127, 185, 251],
        '300': [68, 156, 253],
        '400': [0, 126, 254],
        '500': [13, 100, 226],
        '600': [17, 79, 189],
        '700': [15, 62, 157],
        '800': [10, 46, 122],
        '900': [1, 22, 77],
    }
}

const isColor = (color: Color | ColorGroup): color is Color => {
    return Array.isArray(color) || typeof color === 'string'
}

const usesColor = (color: Color):void => {
    // does something with the color
}

for(const color in colors) {
    if(isColor(colors[color])) usesColor(colors[color]) // error: type 'Record<string, Color>' is not assignable to type 'Color'
}

Playground link

有什么想法吗？我是否只是遗漏了一些关于类型保护的基本知识？

Answer 1

您运行遇到了 TypeScript 的设计限制。有关详细信息，请参阅 microsoft/TypeScript#33391 and microsoft/TypeScript#31445。

问题是编译器不会跟踪属性类型保护的结果，除非这些属性是字符串文字或数字文字：

if (isColor(colors.black)) usesColor(colors.black); // okay

和不是如果它是存储在变量中的值：

if (isColor(colors[color])) usesColor(colors[color]) // error!

访问colors[color]时，编译器只知道color是string类型的变量。在类型保护之后，您再次访问 colors[color]，但编译器没有意识到您之前检查过它，因为 color 只是一些 string 类型的变量。在某种意义上，编译器看不出您的代码与此代码之间的区别：

declare const color1: string;
declare const color2: string;
if (isColor(colors[color1])) usesColor(colors[color2]); // error!

这不是类型保护的好用处。

上面的链接问题提到，如果支持这样的代码会很好，但事实证明它在编译器资源方面非常昂贵。跟踪哪些变量被用作索引是很多额外的而且几乎总是不必要的工作。这里的用例显然不值得……尤其是因为：

有一个小的重构可以提供您正在寻找的行为。与其进行多次索引操作，不如进行一次索引操作并将其保存到自己的变量中，如下所示：

for (const color in colors) {
    const c = colors[color];
    if (isColor(c)) usesColor(c) // okay
}

由于 c 是它自己的变量，因此不再需要担心任何 indexing-with-string。编译器可以很容易地使用 c 上的类型保护来缩小 c 的类型。所以，你得到了你想要的行为，但代价是稍微不那么惯用 JavaScript.

Playground link to code

Typeguard 不会缩小类型

Typeguard doesn't narrow type

typescript

typeguards