新打字稿“满足”运算符

Question

下面是来自官方Typescript站点的一个关于< code >满足运算符的示例:

type Colors = "red" | "green" | "blue";

// Ensure that we have exactly the keys from 'Colors'.
const favoriteColors = {
    "red": "yes",
    "green": false,
    "blue": "kinda",
    "platypus": false
//  ~~~~~~~~~~ error - "platypus" was never listed in 'Colors'.
} satisfies Record<Colors, unknown>;

但我不明白它带来的不仅仅是:

type Colors = "red" | "green" | "blue";

// Ensure that we have exactly the keys from 'Colors'.
const favoriteColors: Record<Colors, unknown> = {
    "red": "yes",
    "green": false,
    "blue": "kinda",
    "platypus": false
//  ~~~~~~~~~~ error - "platypus" was never listed in 'Colors'.
};

在每种情况下，“鸭嘴兽”都会引发错误，因为颜色类型只有“红色”、“绿色”或“蓝色”。

Answer 1

不同之处在于您可以在定义收藏夹后使用它做什么。

当满足时，分配的对象文字的实际类型被用作收藏夹的类型，关于它包含的键和值的信息被保留（对象文字的类型只是根据它应该满足的类型进行检查）。

// Ensure that we have exactly the keys from 'Colors'.
const favoriteColors = {
    "red": "yes",
    "green": false,
    "blue": "kinda",
} satisfies Record<Colors, unknown>;
favoriteColors.blue.toUpperCase() //ok it's a string
favoriteColors.green.toUpperCase() // error, it's a boolean 

游乐场链接

如果没有< code >满足，访问< code>favoriteColors的属性的类型将是< code >未知，因为< code>favoriteColors的类型将是< code >记录

// Ensure that we have exactly the keys from 'Colors'.
const favoriteColors: Record<Colors, unknown> = {
    "red": "yes",
    "green": false,
    "blue": "kinda",
};

favoriteColors.blue.toUpperCase() // error, favoriteColors.blue is unknown
favoriteColors.green.toUpperCase() // error, favoriteColors.green is unknown

游乐场链接