新的 Typescript“满足”运算符

Question

以下是有关运营商的官方公告的示例satisfies：

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'.
};

在每种情况下都会platypus引发错误，因为 Colors 类型只有red、green或blue。

Answer 1

区别在于favoriteColors定义它后可以做什么。

对于satisfies，分配的对象字面量的实际类型用作 的类型 favoriteColors，有关它包含的键和值的信息被保留（对象字面量的类型只是根据它应该满足的类型进行检查）。

// 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 

游乐场链接

如果没有satisfies，则访问 的 属性的类型favoriteColors将是unknown，因为 的类型favoriteColors将Record<Colors, unknown>如注释中所声明的那样。对象文字中的信息丢失。

// 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

游乐场链接