TypeScript:如何将接口(interface)映射到自定义数据类型

Question

我有以下类型:

interface USER {
    email: string;
    age: number;
}

interface SCORES {
    likes: number;
    followers: number;
}

然后复合状态如下图:

interface UserStats {
    user: USER;
    stats: SCORES;
}

现在我得到一个 payload看起来像这样:

{type: 'user', values: {email:"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfdedddcffd8d2ded6d391dcd0d2" rel="noreferrer noopener nofollow">[email protected]</a>",age: 21}} 或者 {type: 'stats', values: {likes:20,followers: 21}}

在解构上述有效负载时，我需要分配其类型，使其涵盖这两种情况，例如:

type payloadKeyTypes = 'user' | 'stats'
type configPayload = USER | SCORES
interface payloadType {
    [payloadKeyTypes]: configPayLoad
}

但这说:A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type

我该如何解决这个问题？

Answer 1

禁止在接口(interface)中使用联合类型作为索引签名。然而，自从 typescript 4.4您可以使用符号和模板文字字符串。

在这种特殊情况下，值得使用 type Record因为它允许您使用联合:

interface USER {
    email: string;
    age: number;
}

interface SCORES {
    likes: number;
    followers: number;
}

interface UserStats {
    user: USER;
    stats: SCORES;
}

type payloadKeyTypes = 'user' | 'stats'

type configPayload = USER | SCORES

type payloadType = Record<payloadKeyTypes, configPayload> 

Playground

此外，请注意 typescript 中有命名约定。所有类型/接口(interface)/枚举都应大写并采用驼峰式命名。然而，这只是一个约定。