如何在Typescript中键入对象键?

Question

我有一个简单的函数，它接受一个对象作为参数。为了只接收有效的数据，我需要输入对象的键，如下所示:

type DataType = "about" | "favorites" | "username";
type UpdatedData = { [key in DataType]: any };
function onSave (updatedData: UpdatedData){
//do stuff
}
// in a component
const onClickSave = () => onSave({ "about": text });

Typescript抛出以下错误:

类型为'{about: text;}'不能赋值给'UpdatedData'类型的参数。键入"{about: text;}'缺少来自'UpdatedData'类型的以下属性:favorites, username

如何解决这个问题?当然，我可以写[key: string]而不是[key in DataType]，但这样打字就没用了。

Answer 1

由于UpdatedData的属性可以是可选的，所以只需添加?使其成为可选的。

编辑:就像@ jjsamimmie B提到的，一个空的{}仍然是允许的。

type DataType = "about" | "favorites" | "username";
type UpdatedData = { [key in DataType]?: any };
function onSave (updatedData: UpdatedData){
}
const text = "hello"
const onClickSave = () => onSave({ "about": text });

Answer 2

try this:

type DataType = "about" | "favorites" | "username";
type Expand<U> = U extends string ? { [key in U]: any } : never
type UpdatedData = Expand<DataType>

TS操场

Answer 3

无论如何，可以使用以下const断言来完成@ jjsamrmiieb提供的相同功能:

const DataType = ["about", "favorites", "username"] as const;
type UpdatedData = { [key in typeof DataType]?: any };

但是正如@yudhiesh所提到的，将每个字段设置为可选，允许出现多个字段(或者根本没有字段)。如果你在一个场景中，只允许一个键从预期的键值列表中出现，那么我建议你看看这篇文章: