Does Typescript allow for nesting Pick<> types in any way?

Question

Does Typescript allow for nesting Pick<> types in any way?

I've been exploring ways to enhance safety in my client-side GraphQL queries, and I'm open to suggestions for a better approach.

Currently, my query is structured like this:

export const tenantManagePageQuery = async (tenantId: string) =>
    graphQLClient.request<{
        tenants: TenantManagePageQueryTenant[];
    }>(
        /* GraphQL */ `
            query tenants($tenantId: String!) {
                tenants(tenantIds: [$tenantId]) {
                    id
                    description
                    name
                    approvedUsers {
                        id
                        alias
                    }
                    pendingUsers {
                        id
                        alias
                    }
                }
            }
        `,
        { tenantId },
    );

To define the TenantManagePageQueryTenant type, I usually do something similar to this:

interface TenantManagePageQueryTenant
    extends Pick<Tenant, 'id' | 'description' | 'name'> {}

The base Tenant model represents my GQL model type.

I'm wondering if there is a way to extend the `Pick` statement to also include nested properties.

For instance:

interface TenantManagePageQueryTenant
    extends Pick<Tenant, 'id' | 'description' | 'name' | Pick<approvedUser| 'id' | 'alias'> {}

typescript graphql

Answer 1

Answer №1

In a similar vein to Colin's response, approaching the problem from a different angle can yield interesting results. If you find yourself needing to deconstruct an existing interface or type, utilizing indexes can be quite useful:


// Original type
type Tenant = {
    id:string;
    description:string;
    name:string;
    approvedUsers: Array<{
      id:string;
      alias:string;
    }>
}

// Deconstruction
type TenantManagePageQueryTenant = 
  Pick<Tenant, 'id' | 'description' | 'name'> & {
    approvedUsers: Array<Pick<Tenant['approvedUsers'][0], 'id' | 'alias'>>
  }

Option 1 - Simplified types

As mentioned in the comments, this can be slightly refined for better clarity:

type TenantSubset = Pick<Tenant, 'id' | 'description' | 'name'>
type ApprovedUserSubset = Pick<Tenant['approvedUsers'][number], 'id' | 'alias'>

type TenantManagePageQueryTenant = TenantSubset & { approvedUsers: Array<ApprovedUserSubset> }

Option 2 - Direct approach

Although more repetitive, this version may be easier to follow:

type TenantManagePageQueryTenant = { 
  id: Tenant['id'],
  description: Tenant['description'],
  name: Tenant['name'],
  approvedUsers: Array<{
    id: Tenant['approvedUsers'][number]['id'],
    alias: Tenant['approvedUsers'][number]['alias'],
  }> 
}

Interactive Playground

Answer 2

In a similar vein to Colin's response, approaching the problem from a different angle can yield interesting results. If you find yourself needing to deconstruct an existing interface or type, utilizing indexes can be quite useful:


// Original type
type Tenant = {
    id:string;
    description:string;
    name:string;
    approvedUsers: Array<{
      id:string;
      alias:string;
    }>
}

// Deconstruction
type TenantManagePageQueryTenant = 
  Pick<Tenant, 'id' | 'description' | 'name'> & {
    approvedUsers: Array<Pick<Tenant['approvedUsers'][0], 'id' | 'alias'>>
  }

Option 1 - Simplified types

As mentioned in the comments, this can be slightly refined for better clarity:

type TenantSubset = Pick<Tenant, 'id' | 'description' | 'name'>
type ApprovedUserSubset = Pick<Tenant['approvedUsers'][number], 'id' | 'alias'>

type TenantManagePageQueryTenant = TenantSubset & { approvedUsers: Array<ApprovedUserSubset> }

Option 2 - Direct approach

Although more repetitive, this version may be easier to follow:

type TenantManagePageQueryTenant = { 
  id: Tenant['id'],
  description: Tenant['description'],
  name: Tenant['name'],
  approvedUsers: Array<{
    id: Tenant['approvedUsers'][number]['id'],
    alias: Tenant['approvedUsers'][number]['alias'],
  }> 
}

Interactive Playground

Answer 3

Answer №2

Although @Avius's code is a good start, there seems to be an error with the interface extending the intersection type. To resolve this, you should use the following type:

type TenantManagePageQueryTenant = Pick<Tenant, 'id' | 'description' | 'name'>
    & { approvedUsers: Pick<ApprovedUser, 'id' | 'alias'>[] }
{ }

interface Tenant {
    id:string;
    description:string;
    name:string;
}

interface ApprovedUser {
    id:string;
    alias:string;
}

let tenant:TenantManagePageQueryTenant = {
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb" // To see the desired type warning, try removing 'alias' 
  }]
}

Playground Link

Answer 4

Although @Avius's code is a good start, there seems to be an error with the interface extending the intersection type. To resolve this, you should use the following type:

type TenantManagePageQueryTenant = Pick<Tenant, 'id' | 'description' | 'name'>
    & { approvedUsers: Pick<ApprovedUser, 'id' | 'alias'>[] }
{ }

interface Tenant {
    id:string;
    description:string;
    name:string;
}

interface ApprovedUser {
    id:string;
    alias:string;
}

let tenant:TenantManagePageQueryTenant = {
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb" // To see the desired type warning, try removing 'alias' 
  }]
}

Playground Link

Answer 5

Answer №3

Perhaps utilizing intersection types could address the question, if I interpreted it correctly.

If approvedUsers is an array, the type definition could resemble this:

interface TenantManagePageQueryTenant extends
    Pick<Tenant, 'id' | 'description' | 'name'>
    & { approvedUsers: Pick<ApprovedUser | 'id' | 'alias'>[] }
{}

An example of a valid object of type TenantManagePageQueryTenant would be:

{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb"
  }]
}

However, the following examples would not be valid:

// missing alias in approvedUsers[0]

{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa"
  }]
}

// unknown field extra in approvedUsers[0]
{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb",
    extra: 345678
  }]
}

Answer 6

Perhaps utilizing intersection types could address the question, if I interpreted it correctly.

If approvedUsers is an array, the type definition could resemble this:

interface TenantManagePageQueryTenant extends
    Pick<Tenant, 'id' | 'description' | 'name'>
    & { approvedUsers: Pick<ApprovedUser | 'id' | 'alias'>[] }
{}

An example of a valid object of type TenantManagePageQueryTenant would be:

{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb"
  }]
}

However, the following examples would not be valid:

// missing alias in approvedUsers[0]

{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa"
  }]
}

// unknown field extra in approvedUsers[0]
{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb",
    extra: 345678
  }]
}

Does Typescript allow for nesting Pick<> types in any way?

Answer №1

Option 1 - Simplified types

Option 2 - Direct approach

Answer №2

Answer №3

Similar questions

Issues with type errors in authentication wrapper for getServerSideProps

MSBUILD encounters numerous JQuery errors when compiling a web project with TypeScript

What is the solution to the error message stating that the property 'pipe' is not found on the OperatorFunction type?

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

The modal dialog from angular/material is unable to function properly when a shape on Google Maps is clicked

Using Selenium WebDriver with JavaScript: Handling Mouse Events (mouseover, click, keyup) in Selenium WebDriver

Receiving an error in Typescript when passing an object dynamically to a React component

Animation of lava effect in Angular 7

How to display a nested array in TypeScript following a specific structure

Solving the issue where the argument type is not assignable to the parameter type

What could be causing the peculiar behavior I am experiencing when a child component attempts to display values from an object fetched in the parent component?

The specified attribute 'title' is not found within the 'IntrinsicAttributes' type

The 'api' property is not found within the 'MyService' type declaration

Utilizing Functions in Next.js with TypeScript: A Guide to Reusability

Encountering dependency issues with minified directives that remain unresolved

Can you please tell me the name of the ??= operator in Typescript?

"Maximizing the Potential of refetchQueries in reason-apollo: A Comprehensive Guide

Can a reducer be molded in ngrx without utilizing the createReducer function?

What is the best way to format a string into a specific pattern within an Angular application

The path alias feature in Sveltekit seems to be malfunctioning