Typescript: How to use a generic parameter as object key

Question

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?

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>

But, this doesn't work.

Shaun Luttin · Accepted Answer · 2019-06-02 23:12:12Z

55

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

QueryKey extends string
key in 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>;

Example Usage

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'
        }
    }
}

edited Jun 2, 2019 at 23:12

answered Jun 2, 2019 at 23:06

Shaun Luttin

143k93 gold badges443 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karl Taylor Over a year ago

Thank you for a good explanation! I was completely baffled by this because [key in x] makes it sound like you are looping through an array so I was a little thrown.

Collectives™ on Stack Overflow

Typescript: How to use a generic parameter as object key

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related