打字稿:如何使用泛型参数作为对象键 [英] Typescript: How to use a generic parameter as object key

问题描述

是否可以编写一个接口，接受一个字符串常量作为其参数之一，并将其​​用作对象的键?

Is it possible to write an interface that accepts a string constant as one of its parameters, and uses that as the key of an object?

例如，假设我发出两个不同的 GraphQL 请求，它们都返回一个 User，但使用不同的键名:

For instance, assuming I make two different GraphQL requests, both of which return a User, but under different key names:

const userByIdResult = {
  data: {
    userById: {
       id: 123,
       username: 'joseph'
    }
  }
}

const userByUsernameResult = {
  data: {
    userByUsername: {
       id: 123,
       username: 'joseph'
    }
  }
}

我想写一个通用接口会是这样的:

I would imagine writing a generic interface would go something like this:

interface GraphQLResponse<QueryKey, ResponseType> {
  data: {
    [QueryKey]: ResponseType
  }
}

interface User {
    username: string
    id: string
}

type UserByIdResponse = GraphQLResponse<'userById', User>
type UserByUsernameResponse = GraphQLResponse<'userByUsername', User>

但是，这不起作用.

推荐答案

离你很近了.这属于映射类型类别.您需要进行两项更改:

You're close. This falls under the category of Mapped Types. You need to make two changes:

1. QueryKey 扩展字符串
2. QueryKey 中的键

interface GraphQLResponse<QueryKey extends string, ResponseType> {
    data: {
        [key in QueryKey]: ResponseType;
    }
}

interface User {
    username: string;
    id: number;
}

type UserByIdResponse = GraphQLResponse<'userById', User>;
type UserByUsernameResponse = GraphQLResponse<'userByUsername', User>;

示例用法

const userByIdResult: UserByIdResponse = {
    data: {
        userById: {
            id: 123,
            username: 'joseph'
        }
    }
}

const userByUsernameResult: UserByUsernameResponse = {
    data: {
        userByUsername: {
            id: 123,
            username: 'joseph'
        }
    }
}

const userByIdResultBoom: UserByIdResponse = {
    data: {
        userByUsername: {
            id: 123,
            username: 'joseph'
        }
    }
}

这篇关于打字稿:如何使用泛型参数作为对象键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！