typescript 如何从对象数组构建类型定义?

j9per5c4  于 2023-03-24  发布在  TypeScript
关注(0)|答案(1)|浏览(130)

我有一些我手动创建的数据:

const fields = [{ id: 'myId', value: '', type: 'text' }, { id: 'myId2', value: '', type: 'select' }]

const fields = { myId: { value: '', type: 'text' }, myId2: { value: '', type: 'select' } }

我想构建一个接口,如:

type Out = { myId: string; myId2: CustomType }

stringCustomType将取决于我传递给type字段的内容。
整个示例将用于为onSubmit处理程序中的值构建类型,该处理程序将定义可用字段(通过字段数据的id),并取决于它在输入数据中的type字段中定义的内容(联合类型)。

zlwx9yxi

zlwx9yxi1#

你首先需要一个类型名称(字符串)到TypeScript类型的Map:

interface TypeMap {
    text: string;
    select: CustomType;
}

然后,你可以定义一个类型,它可以接受一个字段数组并从它们创建一个类型,使用mapped types

type TypeFromArray<A extends readonly { id: string; value: string; type: keyof TypeMap }[]> = {
    [K in A[number] as K["id"]]: TypeMap[K["type"]];
};

const fields = [
    { id: "myId", value: "", type: "text" },
    { id: "myId2", value: "", type: "select" },
] as const; // note the 'as const'

type X = TypeFromArray<typeof fields>;
//   ^? { myId: string; myId2: CustomType }

同样,也可以创建类型来变换对象:

type TypeFromObject<O extends Readonly<Record<string, { value: string; type: keyof TypeMap }>>> = {
    -readonly [K in keyof O]: TypeMap[O[K]["type"]];
};

const fields = {
    myId: { value: "", type: "text" },
    myId2: { value: "", type: "select" },
} as const; // note the 'as const'

type X = TypeFromObject<typeof fields>;
//   ^? { myId: string; myId2: CustomType }

Playground

相关问题