需要特定字符串作为 TypeScript 界面中的可选键

我遇到过这样的情况：我可以将许多可选的 T 恤大小的道具添加到一个对象中。有没有办法定义一个类型并将其设置为接口中可选键的类型？

type Size = `xxs` | `xs` | `s` | `m` | `l` | `xl` | `xxl`;

interface Sizes {
  [key: Size]: string;
   ^^^
}

上面的例子给我带来了以下错误：

索引签名参数类型不能是联合类型。考虑改用映射对象类型。ts(1337)

然后我发现这个问题，并将我的代码修改如下：

type Size = `xxs` | `xs` | `s` | `m` | `l` | `xl` | `xxl`;

interface Sizes {
  [key in Size]: string;
   ^^^^^^^^^^^
}

但随后出现以下错误：

接口中的计算属性名称必须引用类型为文字类型或“唯一符号”类型的表达式。ts(1169)

计算属性名称必须为“string”、“number”、“symbol”或“any”类型。ts(2464)

找不到名称“key”.ts(2304)

我显然在实施过程中错过了一些相当重要的东西。任何解释将不胜感激。

A 映射类型不是一个接口。你可以把它变成一个类型别名而不是接口：

type TSizes = { [K in Size]?: string };

请注意，我把?在那里，这使得属性可选，正如您可能想要的那样。

一旦有了这样的命名类型，您就可以创建一个扩展它的接口（因为它的所有属性名称都是静态已知的）：

interface ISizes extends TSizes { }

或者您可以使用内置的Partial and Record同时执行这两项操作的实用程序类型：

interface Sizes extends Partial<Record<Size, string>> { }

Then, Sizes是一个带有可选属性键的接口Size其值是类型string:

const s: Sizes = {
    s: "foo",
    m: "bar",
    xxl: "bazzz"
}

好的，希望有帮助；祝你好运！

Playground 代码链接