需要特定字符串作为 TypeScript 界面中的可选键 [英] Require specific string as optional key in TypeScript interface

问题描述

我有一种情况，我可以将许多可选的 T 恤尺寸道具添加到对象中.有没有办法定义一个类型并将其设置为接口中的可选键的类型?

type Size = `xxs` |`xs` |`s` |`米` |`l` |`xl` |`xxl`;接口尺寸{[键:大小]:字符串；^^^}

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

<块引用>

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

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

type Size = `xxs` |`xs` |`s` |`米` |`l` |`xl` |`xxl`;接口尺寸{[大小中的键]:字符串；^^^^^^^^^^^^}

但随后出现以下错误:

<块引用>

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

<块引用>

计算属性名称的类型必须为字符串"、数字"、符号"或任何".ts(2464)

<块引用>

找不到名称key".ts(2304)

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

解决方案

A 映射类型 不是接口.您可以将其设为 类型别名 而不是界面:

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

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

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

interface ISizes extends TSizes { }

或者你可以使用内置的Partial 和 记录 实用程序类型同时执行:

interface Sizes extends Partial>{ }

那么，Sizes 是一个接口，带有来自 Size 的可选属性键，其值是 string 类型:

const s: 大小 = {s:富"，米:酒吧"，xxl:嗡嗡声"}

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

游乐场连结代码

I have a situation where I could have a number of optional, t-shirt size props added to an object. Is there a way to define a type and set it as the optional key's type in an interface?

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

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

The above example presents me with the following error:

An index signature parameter type cannot be a union type. Consider using a mapped object type instead.ts(1337)

I then found this question, and modified my code as follows:

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

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

But am then presented with the following errors:

A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.ts(1169)

A computed property name must be of type 'string', 'number', 'symbol', or 'any'.ts(2464)

Cannot find name 'key'.ts(2304)

I've obviously missed something fairly crucial in my implementation. Any explanation would be much appreciated.

解决方案

A mapped type is not an interface. You can make it a type alias instead of an interface:

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

Note that I put the ? in there which makes the properties optional, as you presumably want.

Once you have such a named type you can make an interface that extends it (since all of its property names are statically known):

interface ISizes extends TSizes { }

Or you can use the built-in Partial and Record utility types to do both at the same time:

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

Then, Sizes is an interface with optional property keys from Size whose values are of type string:

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

Okay, hope that helps; good luck!

Playground link to code

这篇关于需要特定字符串作为 TypeScript 界面中的可选键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！